阻止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 window、Keep 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 文件引用也是可以的。
- 博弈论入门之斐波那契博弈
- 3018: [Usaco2012 Nov]Distant Pastures
- 1755: [Usaco2005 qua]Bank Interest
- SQL Server 重新组织生成索引
- 3386/1752: [Usaco2004 Nov]Til the Cows Come Home 带奶牛回家
- 洛谷P2197 nim游戏(Nim游戏)
- SQL Server 索引和表体系结构(聚集索引+非聚集索引)
- 3384/1750: [Usaco2004 Nov]Apple Catching 接苹果
- 1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列
- 1455: 罗马游戏
- SQL Server 高性能写入的一些总结
- 3389: [Usaco2004 Dec]Cleaning Shifts安排值班
- 1754: [Usaco2005 qua]Bull Math
- 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- OpenGL ES 多目标渲染(MRT)
- R包:gtable包用于处理ggplot2图像
- Sight——杀手级提升Laravel开发速度的组件现在开源了!
- 面试官带你学Android——面试中Handler 这些必备知识点你都知道吗?
- leetcode哈希表之前K个高频元素
- Kali之U盘启动加密与持久化存储制作流程
- Gentoo发行版系统基础使用记录
- Ubuntu-20.04-LTS桌面版与服务器版基础初始配置
- Snap容器基础入门使用
- zabbix入门学习
- 突击并发编程JUC系列-ReentrantReadWriteLock
- Qt音视频开发33-ffmpeg安卓版
- Vue.js|Nuxt仿制探探堆叠滑动|vue仿Tinder卡片效果
- Elasticsearch:透彻理解 Elasticsearch 中的 Bucket aggregation
- html+js开发模拟考试在线评分系统