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机型都能生效,所以就没加延时。

相关推荐
秃顶老男孩.23 分钟前
异步处理(前端面试)
前端·面试·职场和发展
烛阴31 分钟前
【TS 设计模式完全指南】用适配器模式优雅地“兼容”一切
javascript·设计模式·typescript
三脚猫的喵39 分钟前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
文心快码BaiduComate44 分钟前
文心快码3.5S全新升级,体验多智能体协同开发,最高赢无人机!
前端·后端·程序员
安卓开发者1 小时前
鸿蒙Next ArkWeb进程解析:多进程架构如何提升Web体验
前端·架构·harmonyos
炒毛豆1 小时前
移动端响应式px转换插件PostCSS的使用~
前端·javascript·postcss
Swift社区1 小时前
为什么 socket.io 客户端在浏览器能连上,但在 Node.js 中报错 transport close?
javascript·node.js
恋猫de小郭1 小时前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架
android·前端·flutter
wordbaby1 小时前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript
薄雾晚晴1 小时前
Rspack 实战,构建流程升级:自动版本管理 + 命令行美化 + dist 压缩,一键输出生产包
前端·javascript