专栏首页DeveWork阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了)。拿来调试DeveMobile 与EaseMobile 主题 时候发现了不少问题,现在在一个个解决中。其中一个就是这个iOS Web APP中点击链接跳转到Safari 浏览器新标签页(窗口)的问题。

问题说明

iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能(虽然很多小白用户都不知道这个),用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样并最大限度地模拟本地APP 的效果(当然,需要开发者本身做一些代码层面的设置,见《将你的网站打造成一个iOS Web App》、《iOS / Android 移动设备中的 Touch Icons》这两篇文章)。此所谓 Web APP 是也。 DeveMobile 与EaseMobile 主题 也有这个功能。不过,现在发现了个问题,就是通过主屏幕上点击进入Web APP 形式的网页时候,点击任何一个链接就会跳转到Safari 浏览器并新建一标签页打开所属链接——这个功能真心恶心,如果这样的话还是Web APP吗?真不知苹果怎么想的,人家安卓的也不会这样啊。

问题解决

出来问题自然就要搜索解决方法了(不好意思,自行写代码解决不会)。在国外问答网站 stackoverflow 发现有不少这个问题,如iPhone Safari Web App opens links in new windowKeep web app in standalone mode on iPhone 。后来Jeff 在这里找到了一段不错的代码,实地测试在本人的 ipad mini ( iOS 7.1)上测试通过,根据作者的叙述,最新的 iOS 7.0.4(iPhone 与 iPad)测试通过,代码应该兼容性不错,在这里分享:

<script type="text/javascript"> //iOS Web APP中点击链接跳转到Safari 浏览器新标签页的问题 devework.com //stanislav.it/how-to-prevent-ios-standalone-mode-web-apps-from-opening-links-in-safari if(("standalone" in window.navigator) && window.navigator.standalone){ var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)) { event.preventDefault(); document.location.href = noddy.href; } },false); } </script>

建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 送上段模拟圣诞节下雪的javascript 代码

    平安夜我就不多说什么啦,现在Jeff 正在看刚刚出炉的神探夏洛克第三季的圣诞特辑迷你短剧以及纪录片《Unlocking Sherlock 2014》。咱在这里送...

    Jeff
  • 分享一款带尖角浮出 公告栏 样式

    这里所说的带尖角浮出公告栏就是指本站Devework.com上面logo右侧的广告栏,这个广告栏是纯用css+html打造的,没有使用图片。该代码最初来自大前端...

    Jeff
  • WordPress 网站开发“微信小程序”实战(二)

    本文是“WordPress 开发微信小程序”系列的第二篇,本文记录的是开发“DeveWork极客”小程序v1.1 的过程。一如既往,目标读者为了解WordPre...

    Jeff
  • CNCC | 丘成桐演讲全文:工程上取得很大发展,但理论基础仍非常薄弱,人工智能需要一个可被证明的理论作为基础

    AI科技评论消息,2017年10月26日上午,中国计算机学会(CCF)主办的第十四届中国计算机大会(CNCC 2017)正式在福州海峡国际会展中心开幕,雷锋网作...

    AI科技评论
  • Diameter of Binary Tree

    Tyan
  • LeetCode题组:第543题-二叉树的直径

    给定一棵二叉树,你需要计算它的直径长度。一棵二叉树的直径长度是任意两个结点路径长度中的最大值。这条路径可能穿过也可能不穿过根结点。

    明天依旧可好
  • 1007. 素数对猜想 (20)

    让我们定义 dn 为:dn = pn+1 - pn,其中 pi 是第i个素数。显然有 d1=1 且对于n>1有 dn 是偶数。“素数对猜想”认为“存在无穷多对...

    指点
  • LeetCode 204. Count Primes(线性素数筛)

    但是这样做明显会超时,所以我们用素数筛,来快速的求出1-n的所有素数。素数筛的原理,就是所有素数的倍数都是合数,求出一个素数,就把它的倍数都筛掉。

    ShenduCC
  • Cisco H3C 端口汇聚互联

    端口汇聚 –手工汇聚 端口汇聚分为手工汇聚、动态LACP汇聚和静态LACP汇聚。 在端口汇聚中,H3C这些端口汇聚方式都可以与思科的port-channe...

    py3study
  • 如何衡量一个国家是不是真的富裕了

    嫂子是个很有才华的姑娘,早年也有赴日留学的经历,周天去串门,听嫂子讲了讲她以前的故事,通过她朴实略带励志的话语里,我突然发现自己以前的一个想法是错误的,之前一直...

    用户2936994

扫码关注云+社区

领取腾讯云代金券