移动Safari页面卸载/隐藏/模糊深度链接 [英] Mobile Safari Page unload/hide/blur for Deep Linking
问题描述
我正在寻找一个关于移动版Safari的活动，它将检测页面因重定向而被隐藏的时间。我想直接打开我的应用程序，如果用户安装了它，然后尝试安装facebook，如果没有，则转到该网页获取该ID。
I am looking for an event on mobile safari that will detect when the page has been hidden due to a redirect. I want to open my app directly if a user has it installed, then attempt facebook if it is installed, and if not then go to the webpage for that id.
- 如果安装了myapp，则打开myapp。但是safari标签仍然被重定向到facebook.com
- 如果没有安装'myapp'，但facebook是，那么facebook ios app就会打开。但是safari标签仍然被重定向到facebook.com
我创建了一个测试链接与以下HTML / JS：
I've created a test link with the following 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>
推荐答案
好的代码。
< b>编辑：（删除了关于添加返回false的建议; ）
Nice code.
(removed suggestion about adding return false;)
尝试设置在 setTimeout 函数内检查而不是仅清除超时。 （我发现清除对于间隔更有效，而不是简单的1次setTimeout调用）。此外，在尝试使用本机应用程序协议（例如我的 app：// 或 fb）之前，我会检查以确保用户不在桌面浏览器上：// 因为这些浏览器会尝试关注该位置并最终显示错误。
Try setting a check within your setTimeout functions in stead of just clearing the Timeouts. (I find that clearing is much more effective for intervals in stead of simple 1-time setTimeout calls). Also, I would check to make sure the user isn't on a desktop browser before trying a native app protocol like my app:// or fb:// as those browsers will try to follow that location and end up displaying an error.
尝试：
<!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>
当然，取消注释控制台日志并尝试使用<$ c $的值进行实验C>超时。这个确切的代码在IOS 6.1 Safari和Safari 6.0.2 Mac中成功测试。希望它有所帮助！
Of course, un-comment the console logs and do some experimenting with the value of timeout. This exact code tested successfully in IOS 6.1 Safari and Safari 6.0.2 Mac. Hope it helps!
这篇关于移动Safari页面卸载/隐藏/模糊深度链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
