IOS 安全机制拦截 window.open

news/2025/1/23 23:07:52/

摘要

在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相同。
第二种是一个字符串:
表示加载资源的浏览上下文的名称,也就是标签页的名称,如果这个名称在现有的标签页中不存在,则会开启一个新的标签页,如果存在,会跳转到这个标签页。

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


http://www.ppmy.cn/news/1565603.html

相关文章

线上突发:MySQL 自增 ID 用完,怎么办?

线上突发:MySQL 自增 ID 用完,怎么办? 1. 问题背景2. 场景复现3. 自增id用完怎么办?4. 总结 1. 问题背景 最近,我们在数据库巡检的时候发现了一个问题:线上的地址表自增主键用的是int类型。随着业务越做越…

.Net Core微服务入门全纪录(四)——Ocelot-API网关(上)

系列文章目录 1、.Net Core微服务入门系列(一)——项目搭建 2、.Net Core微服务入门全纪录(二)——Consul-服务注册与发现(上) 3、.Net Core微服务入门全纪录(三)——Consul-服务注…

深入了解 Linux 的虚拟内存管理机制:Swap 机制

文章目录 深入了解 Linux 的 Swap 机制一、什么是 Swap?二、Swap 的工作原理三、Swap 的类型四、Swap 的使用场景五、配置 Swap六、Swap 的性能影响七、如何优化 Swap 使用八、总结 深入了解 Linux 的 Swap 机制 在 Linux 操作系统中,Swap 是一种虚拟内…

十一、apply家族(4)

tapply()函数 tapply()函数主要是用于对一个因子或因子列表,执行指定的函数调用,最后获得汇总信息。 tapply()函数的使用格式如下所示。 tapply(x, INDEX, FUN, ...&am…

centos 安全配置基线

CentOS 是一个广泛使用的操作系统,为了确保系统的安全性,需要遵循一系列的安全基线。以下是详细的 CentOS 安全基线配置建议: 通过配置核查,CentOS操作系统未安装入侵防护软件,无法检测到对重要节点进行入侵的 解决方案: 安装入侵…

【线性代数】基础版本的高斯消元法

[精确算法] 高斯消元法求线性方程组 线性方程组 考虑线性方程组, 已知 A ∈ R n , n , b ∈ R n A\in \mathbb{R}^{n,n},b\in \mathbb{R}^n A∈Rn,n,b∈Rn, 求未知 x ∈ R n x\in \mathbb{R}^n x∈Rn A 1 , 1 x 1 A 1 , 2 x 2 ⋯ A 1 , n x n b 1…

【jmeter】下载及使用教程【mac】

1.安装java 打开 Java 官方下载网站https://www.oracle.com/java/technologies/downloads/选择您想要下载的 Java 版本,下载以 .dmg 结尾的安装包,注意 JMeter 需要 Java 8下载后打开安装包点击“安装”按钮即可 2.下载jmeter 打开 Apache JMeter 官方…

selenium获取登录token

背景 新到一个需求需要用爬虫采集数据,但这个采购的系统登录做了加密,我也懒得研究前端代码了,于是考虑用selenium来获取用户token做处理。 下载webdriver 由于我开发机器使用的chorme,因此下载的chorme webdriver,…