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

相关推荐
非凡ghost7 分钟前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端
用户61204149221312 分钟前
html+layui+node+js做的个人财务管理系统
javascript·后端
j七七14 分钟前
5分钟搭微信自动回复机器人5分钟搭微信自动回复机器人
运维·服务器·开发语言·前端·python·微信
快起来别睡了15 分钟前
TypeScript装饰器详解:像搭积木一样给代码加功能
前端·typescript
OpenTiny社区33 分钟前
如何使用 TinyEditor 快速部署一个协同编辑器?
前端·vue.js
ttyyttemo34 分钟前
加载图片,不同数据源,Compose实现
前端
Mike_jia1 小时前
Dumbterm:基于网页的终端革命!随时随地安全访问服务器的终极方案
前端
看今朝·1 小时前
【Dash框架】Dash回调函数中Output的属性详解
java·前端·dash
Data_Adventure1 小时前
文件Base64转换工具升级:从图片到多格式文件的全新体验
前端
D11_1 小时前
【React】验证码图片管理系统
前端