最近为了更好地接触移动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)测试通过,代码应该兼容性不错,在这里分享:

//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);

}

//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);

}

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

ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页相关推荐

  1. 如何在手机浏览器wap网页中点击链接跳转到微信界面

    2019独角兽企业重金招聘Python工程师标准>>> 先说第一种,最简单的唤起微信协议,weixin://主流浏览器都支持,app加个浏览器功能就可以使用weixin:// .用途 ...

  2. 【解决方案】chrome打开新标签页自动打开chrome://newtab并且跳转到谷歌香港

    简述 天,昨天开始遇到这个问题,还没有留心,结果今天多次使用chrome的时候,就发现有些不对了.. 打开chrome的新标签页,结果出现了自动跳转的问题 我自动跳转的是下面这个网页: https:/ ...

  3. 谷歌浏览器打开链接,如何不是覆盖当前页面而自动跳转到新标签页?

    Google Chrome打开链接直接会把当前页面覆盖掉,使用体验比较差. 看到很多人都是用插件解决的,但是我感觉谷歌不会把这么重要的功能隐藏为不可设置吧,所以找了好久,终于找到了方法. 第一步,打开 ...

  4. 解密-大象跳转如何实现微信中点击链接直接跳到默认浏览器(不是在微信内置浏览器打开)

    很多朋友不知道如何实现微信中点击链接直接跳到默认浏览器的功能是如何实现,经常能在各大论坛看到这样的提问,故特写了这篇文章分享一下之前在网上看到的一个在线使用该功能的平台的操作方法. 大象跳转在线操作步 ...

  5. 在vue中,用路由router跳转打开一个新标签页

    需求:点击退租单,生成一个退款表格(打印PDF).需要跳转到一个新标签页. 一.用JS实现 let routeUrl = this.$router.resolve({path: "/surr ...

  6. js 页面跳转两种方式(原页面跳转,打开新标签页)

    1 页面跳转(原页面跳转) (1)a标签实现 <a href="https://blog.csdn.net/qq_38974638">旭东怪的博客</a> ...

  7. 路由跳转新标签页打开

    路由跳转新标签页打开 示例图: 点击页面跳转方法: toApply() {let routerData = this.$router.resolve({path: "/apply" ...

  8. 如何设置使chrome新标签页中打开链接自动跳转到新标签页?

    在新标签打开链接的时候这样点选 Ctrl+左键 或者 鼠标中键 或者 右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转 但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会 ...

  9. iOS开发笔记--超全!iOS 面试题汇总

    作者:Job_Yang 之前看了很多面试题,感觉要不是不够就是过于冗余,于是我将网上的一些面试题进行了删减和重排,现在分享给大家.(题目来源于网络,侵删) Object-c的类可以多重继承么?可以实现 ...

最新文章

  1. 数据备份基础之备份类型
  2. 灰度图像--图像增强 Robert算子、Sobel算子
  3. IOS之使用纯代码push ViewController
  4. mycat连接mysql时间_Mycat连接MySQL 8时的注意事项
  5. python语言程序设计及医学应用_Python语言程序设计(高等学校计算机专业规划教材)...
  6. 一台服务器搭建部署两个或多个Redis实例
  7. iptables之三表五链
  8. 指向 类成员函数 指针的用法
  9. 红芯事件追踪:官方致歉承认基于开源架构;创始人履历被指夸大
  10. (寻找第K小的数amp;amp;寻找第K小的数的和)
  11. void value not ignored as it ought to be 报错原因
  12. oracle 修改子分区,Oracle子分区(sub partition)操作
  13. Scala的那些匿名函数
  14. 迷途指针 new delete
  15. luis soares mysql,mysql访问报错如下
  16. 适合初学者的PASCAL VOC2012数据集的下载及简单讲解
  17. 数字图像相关(DIC)原理与应用
  18. Power Apps注册账户
  19. c语言结构体数组怎么初始化,c语言结构体数组初始化
  20. No serializer found for class com.yumoxuan.domain.Store and no properties discovered to create BeanS

热门文章

  1. Jerry Wang的ABAP Development Tool培训材料 - SAP 引入ADT的初衷
  2. SAP Pricing的access sequence是如何在循环被处理的
  3. 通过配置文件避免硬编码的一个例子
  4. When will the reference ATTRIBUTE_REF of an BOL entity be cleared
  5. javascript file cached in server side
  6. HelloWorldProxy is a factory bean
  7. python requests库api_Python+requests库发送接口入参为xml格式的接口请求
  8. <学习日记>计算机网络第一章预习记录
  9. console 一行_你还在用 console.log 调试?
  10. python职场应用_大学粗略学习过Python,在进入职场后如何进一步学习Python