我想创建一个网页,该页面将在iPhone未安装应用程序的情况下将iPhone重定向到应用程序商店,但是如果iPhone安装了应用程序,我希望它打开应用程序。
我已经在iPhone应用程序中实现了自定义网址,因此该应用程序的网址如下所示:
myapp://
如果此网址无效,我希望页面重定向到应用商店。这有可能吗?
如果我没有在手机上安装该应用程序,并在safari中编写myapp://网址,那么我得到的只是一条错误消息。
即使我真的很想知道使用JavaScript的丑陋骇客?
我想创建一个网页,该页面将在iPhone未安装应用程序的情况下将iPhone重定向到应用程序商店,但是如果iPhone安装了应用程序,我希望它打开应用程序。
我已经在iPhone应用程序中实现了自定义网址,因此该应用程序的网址如下所示:
myapp://
如果此网址无效,我希望页面重定向到应用商店。这有可能吗?
如果我没有在手机上安装该应用程序,并在safari中编写myapp://网址,那么我得到的只是一条错误消息。
即使我真的很想知道使用JavaScript的丑陋骇客?
Answers:
据我所知,您无法从浏览器中检查是否已安装应用程序。
但是您可以尝试将手机重定向到应用程序,如果没有任何反应,请将手机重定向到指定页面,如下所示:
setTimeout(function () { window.location = "https://itunes.apple.com/appdir"; }, 25);
window.location = "appname://";
如果第二行代码给出结果,则永远不会执行第一行。
希望这可以帮助!
类似的问题:
为了进一步解决这个问题,有时您需要添加额外的代码来处理人们在启动应用程序后返回浏览器的问题,即setTimeout函数将在他们运行时立即运行。所以,我做这样的事情:
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100) return;
window.location = "https://itunes.apple.com/appdir";
}, 25);
window.location = "appname://";
这样,如果冻结了代码执行(即应用程序切换),它将无法运行。
iOS Safari具有一项功能,可让您在网页上添加“智能”横幅,该横幅将链接到您的应用程序(如果已安装)或App Store。
您可以通过添加一个 meta
在页面上标签来实现。如果您希望应用程序在加载时做一些特别的事情,甚至可以指定详细的应用程序URL。
有关详细信息,请访问Apple的“ 使用智能应用程序横幅广告推广应用程序”页面。
该机制具有易于操作和呈现标准化横幅的优点。缺点是您对外观或位置没有太多控制权。另外,如果在Safari以外的浏览器中查看该页面,则所有选择均关闭。
截至2017年,似乎没有可靠的方法可以检测到已安装的应用程序,并且重定向技巧不会在所有地方起作用。
对于像我这样需要直接从电子邮件进行深度链接的人(非常常见),值得注意以下几点:
使用appScheme://发送电子邮件无法正常工作,因为链接将在Gmail中进行过滤
Chrome阻止了自动重定向到appScheme://:我怀疑Chrome要求重定向与用户交互(例如点击)同步
现在,您可以不使用appScheme://进行深层链接,这会更好,但它需要一个现代化的平台和其他设置。Android iOS
值得注意的是,其他人已经对此进行了深入的思考。如果您查看Slack如何实现其“魔术链接”功能,您会注意到:
您可以签出此插件来尝试解决问题。它基于与missemisa和Alastair等人描述的方法相同的方法,但是使用了隐藏的iframe。
@Alistair在此答案中指出中,有时用户在打开应用程序后会返回浏览器。该答案的评论者指出,所使用的时间值必须根据iOS版本进行更改。当我们的团队不得不处理此问题时,我们发现必须调整初始超时的时间值并告知我们是否已返回浏览器,并且通常不适用于所有用户和设备。
与其使用任意的时差阈值来确定我们是否返回浏览器,还不如检测“ pagehide”和“ pageshow”事件。
我开发了以下网页来帮助诊断正在发生的事情。随着事件的发生,它添加了HTML诊断程序,主要是因为使用控制台日志记录,警报或Web Inspector,jsfiddle.net等技术在此工作流程中都有其缺点。Javascript不会使用时间阈值,而是会计算“ pagehide”和“ pageshow”事件的数量,以查看它们是否已发生。我发现最有效的策略是使用初始超时1000(而不是其他人报告/建议的25、50或100)。
可以在本地服务器上提供服务,例如python -m SimpleHTTPServer
,可以在iOS Safari上查看。
要使用它,请按“打开已安装的应用程序”或“未安装应用程序”链接。这些链接应分别导致Maps应用或App Store打开。然后,您可以返回Safari查看事件的顺序和时间。
(请注意:这仅适用于Safari。对于其他浏览器(例如Chrome),您必须安装用于页面隐藏/显示等效事件的处理程序)。
更新:正如@Mikko在评论中指出的那样,iOS8中显然不再支持我们正在使用的pageshow / pagehide事件。
<html>
<head>
</head>
<body>
<a href="maps://" onclick="clickHandler()">Open an installed app</a>
<br/><br/>
<a href="xmapsx://" onclick="clickHandler()">App not installed</a>
<br/>
<script>
var hideShowCount = 0 ;
window.addEventListener("pagehide", function() {
hideShowCount++ ;
showEventTime('pagehide') ;
});
window.addEventListener("pageshow", function() {
hideShowCount++ ;
showEventTime('pageshow') ;
});
function clickHandler(){
var hideShowCountAtClick = hideShowCount ;
showEventTime('click') ;
setTimeout(function () {
showEventTime('timeout function '+(hideShowCount-hideShowCountAtClick)+' hide/show events') ;
if (hideShowCount == hideShowCountAtClick){
// app is not installed, go to App Store
window.location = 'http://itunes.apple.com/app' ;
}
}, 1000);
}
function currentTime()
{
return Date.now()/1000 ;
}
function showEventTime(event){
var time = currentTime() ;
document.body.appendChild(document.createElement('br'));
document.body.appendChild(document.createTextNode(time+' '+event));
}
</script>
</body>
</html>
我需要做这样的事情,最终我得到了以下解决方案。
我有一个特定的网站URL,它将用两个按钮打开一个页面
1)一键进入网站
2)按钮2转到应用程序(iPhone / Android手机/平板电脑),如果未安装应用程序(例如另一个URL或应用程序商店),则可以从此处退回到默认位置
3)cookie记住用户的选择
<head>
<title>Mobile Router Example </title>
<script type="text/javascript">
function set_cookie(name,value)
{
// js code to write cookie
}
function read_cookie(name) {
// jsCode to read cookie
}
function goToApp(appLocation) {
setTimeout(function() {
window.location = appLocation;
//this is a fallback if the app is not installed. Could direct to an app store or a website telling user how to get app
}, 25);
window.location = "custom-uri://AppShouldListenForThis";
}
function goToWeb(webLocation) {
window.location = webLocation;
}
if (readCookie('appLinkIgnoreWeb') == 'true' ) {
goToWeb('http://somewebsite');
}
else if (readCookie('appLinkIgnoreApp') == 'true') {
goToApp('http://fallbackLocation');
}
</script>
</head>
<body>
<div class="iphone_table_padding">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<!-- INTRO -->
<span class="iphone_copy_intro">Check out our new app or go to website</span>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_btn_padding">
<!-- GET IPHONE APP BTN -->
<table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie('appLinkIgnoreApp',document.getElementById('chkDontShow').checked);goToApp('http://getappfallback')">
<tr>
<td class="iphone_btn_on_left"> </td>
<td class="iphone_btn_on_mid">
<span class="iphone_copy_btn">
Get The Mobile Applications
</span>
</td>
<td class="iphone_btn_on_right"> </td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_btn_padding">
<table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie('appLinkIgnoreWeb',document.getElementById('chkDontShow').checked);goToWeb('http://www.website.com')">
<tr>
<td class="iphone_btn_left"> </td>
<td class="iphone_btn_mid">
<span class="iphone_copy_btn">
Visit Website.com
</span>
</td>
<td class="iphone_btn_right"> </td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_chk_padding">
<!-- CHECK BOX -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" id="chkDontShow" /></td>
<td>
<span class="iphone_copy_chk">
<label for="chkDontShow"> Don’t show this screen again.</label>
</span>
</td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
</table>
</div>
</body>
</html>
编译了一些答案后,我提出了以下代码。让我吃惊的是,计时器也没有得到一个PC(浏览器,FF)或Android上的Chrome浏览冻结-触发器在后台工作,并在清晰视野检查是唯一可靠的信息。
var timestamp = new Date().getTime();
var timerDelay = 5000;
var processingBuffer = 2000;
var redirect = function(url) {
//window.location = url;
log('ts: ' + timestamp + '; redirecting to: ' + url);
}
var isPageHidden = function() {
var browserSpecificProps = {hidden:1, mozHidden:1, msHidden:1, webkitHidden:1};
for (var p in browserSpecificProps) {
if(typeof document[p] !== "undefined"){
return document[p];
}
}
return false; // actually inconclusive, assuming not
}
var elapsedMoreTimeThanTimerSet = function(){
var elapsed = new Date().getTime() - timestamp;
log('elapsed: ' + elapsed);
return timerDelay + processingBuffer < elapsed;
}
var redirectToFallbackIfBrowserStillActive = function() {
var elapsedMore = elapsedMoreTimeThanTimerSet();
log('hidden:' + isPageHidden() +'; time: '+ elapsedMore);
if (isPageHidden() || elapsedMore) {
log('not redirecting');
}else{
redirect('appStoreUrl');
}
}
var log = function(msg){
document.getElementById('log').innerHTML += msg + "<br>";
}
setTimeout(redirectToFallbackIfBrowserStillActive, timerDelay);
redirect('nativeApp://');
日期解决方案比其他解决方案要好得多,我不得不在50上增加时间,例如,这是一个Tweeter示例:
//on click or your event handler..
var twMessage = "Your Message to share";
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100) return;
var twitterUrl = "https://twitter.com/share?text="+twMessage;
window.open(twitterUrl, '_blank');
}, 50);
window.location = "twitter://post?message="+twMessage;
Mobile IOS Safari上的唯一问题是您没有在设备上安装应用程序,因此Safari在打开新网址时会显示自动关闭的警报,无论如何,这是一个不错的解决方案!