移动 Safari 页面卸载/隐藏/模糊以进行深度链接
Posted
技术标签:
【中文标题】移动 Safari 页面卸载/隐藏/模糊以进行深度链接【英文标题】：Mobile Safari Page unload/hide/blur for Deep Linking 【发布时间】：2013-01-20 20:27:16 【问题描述】：我正在寻找一个关于移动 Safari 的事件，该事件将检测页面何时因重定向而被隐藏。如果用户安装了我的应用程序，我想直接打开它，如果已安装，则尝试使用 facebook，如果没有，则转到该 id 的网页。
-
如果安装了“myapp”，则打开 myapp。但 safari 选项卡仍会重定向到 facebook.com
如果未安装“myapp”，但安装了 facebook，则打开 facebook ios 应用程序。但 safari 选项卡仍会重定向到 facebook.com
我使用以下 html/JS 创建了一个test link：
<!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>
【问题讨论】：
【参考方案1】：不错的代码。编辑：（删除了关于添加 return false; 的建议）
尝试在您的 setTimeout 函数中设置检查，而不是仅仅清除超时。 （我发现清除间隔比简单的 1 次 setTimeout 调用更有效）。此外，在尝试像我的 app:// 或 fb:// 这样的本机应用程序协议之前，我会检查以确保用户不在桌面浏览器上，因为这些浏览器会尝试跟踪该位置并最终显示错误。
试试：
<!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 重定向，而不是链接。所以没有“链接点击气泡”事件可以取消。 你是对的 - 我从臀部射门，完全错过了这个事实！不过，关于浏览器检查的建议仍然存在。请参阅上面我编辑的答案 - 移动了setTimeout 函数中的相关检查并摆脱了 clearTimeouts。
Safari 会在重新启动后重新打开上次访问的页面，并且脚本在这种情况下将不起作用。为了避免这种行为，您可以将window.close(); 附加到else 块中。
不使用Date的iOS 13.3上的Safari解决方案：gist.github.com/diachedelic/0d60233dab3dcae3215da8a4dfdcd434以上是关于移动 Safari 页面卸载/隐藏/模糊以进行深度链接的主要内容，如果未能解决你的问题，请参考以下文章
隐藏 Safari 组件时如何使用 jQuery Mobile 从错误加载页面中恢复？