我正在移动 safari 上寻找一个事件，该事件将检测页面何时因重定向而被隐藏。如果用户安装了我的应用程序，我想直接打开它，如果安装了，则尝试使用 facebook，如果没有，则转到该 ID 的网页。
- 如果安装了“myapp”，则会打开 myapp。但是 safari 选项卡仍然被重定向到 facebook.com
- 如果未安装“myapp”，但安装了 facebook，则打开 facebook ios 应用程序。但是 safari 选项卡仍然被重定向到 facebook.com
我创建了一个 test link使用以下 HTML/JS:
<!DOCTYPE html>
<html>
<head>
<title>Redirect Test</title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<meta name='viewport' content='initial-scale = 1.0,maximum-scale = 1.0' />
</head>
<body>
<button>Open Oreo</button>
<script type='text/javascript'>
jQuery(function(){
jQuery( 'button' ).on( 'click', function(){
var myid = null, fbid = null;
// Watch for page leave to kill timers
jQuery( window ).on( 'pagehide pageshow blur unload', function(){
if ( myid ) {
clearTimeout( myid );
}
if ( fbid ) {
clearTimeout( fbid );
}
});
window.location = "myapp://fbprofile/oreo";
var myid = setTimeout(function(){
// My app doesn't exist on device, open facebook
window.location = "fb://profile/oreo";
fbid = setTimeout(function(){
// Facebook doesn't exist on device, open facebook mobile
window.location = "https://www.facebook.com/oreo";
}, 100);
}, 100);
});
});
</script>
</body>
</html>
最佳答案
漂亮的代码。
编辑:(删除了关于添加 return false; 的建议)
尝试在您的 setTimeout 函数中设置一个检查，而不是仅仅清除超时。 (我发现清除对于间隔比简单的 1 次 setTimeout 调用更有效)。此外，在尝试像我的 app:// 或 fb:// 这样的 native 应用程序协议(protocol)之前，我会检查以确保用户不在桌面浏览器上浏览器将尝试跟踪该位置并最终显示错误。
尝试:
<!DOCTYPE html>
<html>
<head>
<title>Redirect Test</title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<meta name='viewport' content='initial-scale = 1.0,maximum-scale = 1.0' />
</head>
<body>
<button>Open Oreo</button>
<script type='text/javascript'>
var mobileExp = /android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera mini|palm( os)?|plucker|pocket|pre\/|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i;
jQuery(function(){
jQuery( 'button' ).on( 'click', function(){
// Don't give desktop browsers a chance to fail on a nativeapp:// protocol
if(!mobileExp.test(navigator.userAgent)) {
window.location = "https://www.facebook.com/oreo";
return;
}
var clicked = +new Date, timeout = 100;
window.location = "myapp://fbprofile/oreo";
setTimeout(function(){
// If we're still here after a (timeout), try native facebook app
if (+new Date - clicked < timeout*2){
console.log('clicked '+ (+new Date - clicked) +' ago- go to FB');
window.location = "fb://profile/oreo";
} else {
console.log('too late for facebook');
}
setTimeout(function(){
// If we're still here after another (timeout), try facebook web app
if (+new Date - clicked < timeout*2){
console.log('clicked '+ (+new Date - clicked) +' ago- go to browser');
window.location = "https://www.facebook.com/oreo";
} else {
console.log('too late for browser');
}
}, timeout);
}, timeout);
});
});
</script>
</body>
</html>
当然，取消对控制台日志的注释，并对 timeout 的值进行一些试验。这段代码在 IOS 6.1 Safari 和 Safari 6.0.2 Mac 中测试成功。希望对您有所帮助!
关于javascript - 用于深度链接的移动 Safari 页面卸载/隐藏/模糊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14715535/