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

阻止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 浏览器新标签页的问题 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 条评论
登录 后参与评论

相关文章

  • Bit-map java 原

    Bit-map就是用一个bit位来标记某个元素对应的Value, 而Key即是该元素。由于采用了Bit为单位来存储数据,因此在存储空间方面,可以大大节省。

    wuweixiang
  • 缓存穿透、并发和雪崩那些事 转

    作者:李艳鹏,阿里资深技术专家!著有《可伸缩服务架构》,《分布式服务架构》等作品,在区块链,聚合支付,电商等领域有一定的积累!

    wuweixiang
  • 通过Docker安装JIRA和Confluence(转)

    需要注意的是,Confluence需要使用utf8_bin,并将事务隔离策略设为READ-COMMITTED。

    wuweixiang
  • Linux/Unix shell 自动导出Oracle数据库

           使用shell脚本实现对Oracle数据库的监控与管理将大大简化DBA的工作负担,如常见的对实例的监控,监听的监控,告警日志的监控,以及数据库的备...

    Leshami
  • numpy: np.random模块 探究(源码)

    JNingWei
  • hdu1020

    @坤的
  • Go基础之--操作Mysql(一)

    关于标准库database/sql database/sql是golang的标准库之一,它提供了一系列接口方法,用于访问关系数据库。它并不会提供数据库特有的方法...

    coders
  • Pytorch小技巧-数据增强(下)

    局部增强,一般裁剪操作是配合图片旋转操作共同进行,先裁减掉一部分,再进行旋转即可。

    用户6719124
  • codeforces 1405B(思维)

    You’re given an array a of n integers, such that a1+a2+⋯+an=0.

    dejavu1zz
  • 洛谷P1311 选择客栈

    题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号。每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),...

    attack

扫码关注云+社区

领取腾讯云代金券