Javascript 如何从 Web 应用程序打开本机 iOS 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10237031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open a native iOS app from a web app
提问by Carl Veazey
SummaryI have an app with a correctly functioning URL scheme that I'd like to launch from a web app stored on the home screen, and the normal JavaScript redirect methods don't seem to work.
总结我有一个具有正常运行的 URL 方案的应用程序，我想从存储在主屏幕上的 Web 应用程序启动它，但正常的 JavaScript 重定向方法似乎不起作用。
DetailsI'm trying to create an iOS web app, to be opened in full-screen mode from a link saved on the Home Screen. The web app needs to open a specific native app. I have already registered the url scheme for the native app, and verified that it works correctly - I can open the native app by typing the scheme directly into my Safari address bar, for instance. I can also open it from other applications using the +openURL:method of UIApplication. I would like to also open it with certain arguments from a native web app that can be added to the home screen.
详细信息我正在尝试创建一个 iOS 网络应用程序，从主屏幕上保存的链接以全屏模式打开。Web 应用程序需要打开特定的本机应用程序。我已经为本机应用程序注册了 url 方案，并验证它可以正常工作 - 例如，我可以通过将方案直接输入到我的 Safari 地址栏中来打开本机应用程序。我也可以使用 的+openURL:方法从其他应用程序打开它UIApplication。我还想使用可以添加到主屏幕的本机 Web 应用程序中的某些参数打开它。
What I'm trying to do is use JavaScript like so inside the native app:
我想要做的是在本机应用程序中像这样使用 JavaScript：
window.location = "myapp://myparam";
When using this code inside the web app I get an alert saying:
在网络应用程序中使用此代码时，我收到一条警告：
"Cannot Open myWebAppName - myWebAppName could not be opened. The error was "This URL can't be shown".".
“无法打开 myWebAppName - 无法打开 myWebAppName。错误是“无法显示此 URL”。”。
This same javascript when executed within Safari works correctly. I get the same result using window.location.replace("myapp://myparam").
在 Safari 中执行时，同样的 javascript 可以正常工作。我使用window.location.replace("myapp://myparam").
The html for the web app is:
Web 应用程序的 html 是：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Carl Veazey">
<!-- Date: 2012-04-19 -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
<script type="text/javascript" charset="utf-8">
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
if (window.navigator.standalone == true) {
window.location = "myapp://myparam";
} else {
document.write("please save this to your home screen");
};} else {
alert("Not iPhone!");
document.location.href = 'please-open-from-an-iphone.html';
};
</script>
</body>
</html>
What am I doing wrong here? I'm pretty inexperienced with javascript and mobile web so I suspect I'm just missing something obvious.
我在这里做错了什么？我对 javascript 和移动网络非常缺乏经验，所以我怀疑我只是错过了一些明显的东西。
回答by AJak
Your code works if its in mobile safari but NOT if its from a bookmark on the iOS desktop. Never tried it that way before, but thats the issue. If i just set your JS to
如果您的代码在移动 safari 中有效，但如果它来自 iOS 桌面上的书签则无效。以前从未尝试过这种方式，但这就是问题所在。如果我只是将你的 JS 设置为
<script type="text/javascript" charset="utf-8">
window.location = "myapp://myparam";
</script>
It works in browser, but when bookmarked it fails. It might have to do something with how the url is loaded when its bookmarked since there is no chrome? My guess is that apple doesn't want booked mark pages to access local apps. Also, I've noticed that if I bookmark a locally hosted page, that works in mobile safari, I can't get it to load via bookmark. Its really odd....
它在浏览器中工作，但在添加书签时失败。由于没有 chrome，它可能必须对添加书签时 url 的加载方式进行处理？我的猜测是苹果不希望预订标记页面访问本地应用程序。此外，我注意到如果我为本地托管的页面添加书签，该页面可在移动 Safari 中使用，则无法通过书签加载它。真的很奇怪....
Best recommendation I have for you is to make it
我给你的最好的建议就是去做
<meta name="apple-mobile-web-app-capable" />
instead of
代替
<meta name="apple-mobile-web-app-capable" content="yes" />
This way it will be on the home screen, but will unfortunately load with the chrome. Thats the only solution I can think of.
这样它就会出现在主屏幕上，但不幸的是会加载 chrome。这是我能想到的唯一解决方案。
回答by Andrew Sklyarevsky
If you need to open an iOS application if it is installed and also want to preserve your page's functionality, the location.href = 'myapp://?params=...';won't help since if myapp://is not registered, the redirect leads user to unreachable destination.
如果您需要打开已安装的 iOS 应用程序并希望保留页面的功能，这location.href = 'myapp://?params=...';将无济于事，因为如果myapp://未注册，重定向会将用户引导至无法访问的目的地。
The safest bet seems to be in using an iframe. The following code will open an iOS app if it is installed and will not cause a failure if it is not (though it may alert a user that the page could not be reached if the app is not installed):
最安全的选择似乎是使用iframe. 如果已安装，以下代码将打开 iOS 应用程序，如果未安装，则不会导致失败（尽管它可能会提醒用户如果未安装该应用程序，则无法访问该页面）：
var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame);
// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
回答by T.Todua
Try like this: The index page
试试这样：索引页
<html><head></head><body>
<?php
$app_url = urlencode('YourApp://profile/blabla');
$full_url = urlencode('http://yoursite.com/profile/bla');
?>
<iframe src="receiver.php?mylink1=<?php echo $app_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
<iframe src="receiver.php?mylink2=<?php echo $full_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
</body>
</html>
the receiver.phppage:
在receiver.php页：
<?php if ($first == $_GET['mylink1'])) { ?>
<script type="text/javascript">
self.window.location = "<?php echo $first;?>";
</script>
<?php } if ($second == $_GET['mylink2'])) { ?>
<script type="text/javascript">
window.parent.location.href = "<?php echo $second ;?>";
//window.top.location.href=theLocation;
//window.top.location.replace(theLocation);
</script>
<?php } ?>
回答by Ryan Brodie
<?php
// Detect device type
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
// Redirect if iPod/iPhone
if( $iPod || $iPhone ){
header('Location:http://example.com');
}
?>
The above will redirect the browser to the inputted URL (http://example.com/) if the device is an iPod or iPhone. Add the script to the top of your web app, make sure you save it as a .phpfile rather than .html.
如果设备是 iPod 或 iPhone，上面的代码会将浏览器重定向到输入的 URL (http://example.com/)。将脚本添加到 Web 应用程序的顶部，确保将其保存为.php文件而不是.html.
Source: http://www.schiffner.com/programming-php-classes/php-mobile-device-detection/
来源：http: //www.schiffner.com/programming-php-classes/php-mobile-device-detection/
