IOS 安全机制拦截 window.open

摘要

在ios环境,在某些情况下执行window.open不生效

一、window.open

javascript 复制代码
window.open(url, target, windowFeatures)
  1. url:「可选参数」,表示你要加载的资源URL或路径,如果不传,则打开一个url地址为about:blank的空白页。

  2. target:「可选参数」,它可以给以下两种值

第一种是target关键字

_self:当前标签页加载;

_blank(默认值):新标签页打开;

_parent:作为当前浏览环境的父级浏览上下文打开,没有父级浏览上下文,效果与_self相同;

_top:作为最顶级的浏览上下文打开,没有顶级浏览上下文,效果与_self相同。

第二种是一个字符串:

表示加载资源的浏览上下文的名称,也就是标签页的名称,如果这个名称在现有的标签页中不存在,则会开启一个新的标签页,如果存在,会跳转到这个标签页。

  1. windowFeatures:「可选参数」,它是一个字符串,用来描述窗口的特性,其格式是"key1=value1, key2=value2",即将key和value以=号连接拼接成字符串,多个key value以逗号隔开,比如我们要打开一个宽为500,高为600的窗口可以这么写:
javascript 复制代码
window.open(url, 'new-window', 'width=500,height=600');

二、Bug

复现问题的demo:

javascript 复制代码
async function jump() {
  await fetch('/xxx');
  window.open('https://www.xxx.cn');
}

正常情况下执行window.open是能正常新标签页打开传入的url的,但是一旦前面用await做了异步操作后,再执行window.open,就不生效了。

三、原因分析

  • 安全机制拦截 :IOS的Safari浏览器为了防止恶意网站通过window.open/a标签打开其他网站,于是对它们的调用有所限制,如果不是由用户直接交互触发的,而是由程序自动触发的,Safari会拦截这个操作。
  • 异步操作 :在AJAX回调中执行window.open/a标签跳转,被浏览器认为是非用户交互行为,所以被拦截。

四、解决方案

方案1:改用location.href
javascript 复制代码
async function jump() {
  await fetch('/xxx');
  location.href = 'https://www.xxx.cn';
}

safari不会拦截location.href

并不是所有场景下都适合用location.href,因为location.href会刷新页面,所以需要根据具体场景来选择。

方案2:先打开一个空标签页
javascript 复制代码
async function jump() {
  const newWin = window.open("", "_blank"); // 提前打开一个窗口
  const { jumpUrl } = await fetch('/xxx');
  if (jumpUrl) {
    newWin.location = jumpUrl;
  } else {
    newWin.close();
    // ... 
  }
}

这里根据有没有jumpUrl进行跳转,如果没有jumpUrl,我需要调用close方法关闭刚才提前打开的那个窗口,而这样用户就会体验到的流程就是,先出来一个新窗口,随后被秒关闭,这样用户体验很差。

方案3:setTimeout/requestAnimationFrame
javascript 复制代码
async function jump() {
  await fetch('/xxx');
  setTimeout(() => {
    window.open('https://www.xxx.cn');
  }, 0)
}
javascript 复制代码
async function jump() {
  await fetch('/xxx');
  requestAnimationFrame(() => {
    window.open('https://www.xxx.cn');
  })
}

五、总结

如果setTimeout不生效,可以尝试加点延时看看,比如100毫秒,我这边实测的ios机型都能生效,所以就没加延时。

相关推荐
gplitems1232 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木3 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350234 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:4 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛5 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼5 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔6 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗6 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗6 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥6 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js