苹果手机浏览器不支持自动触发window.open()方法的解决方案

Web前端开发 / 13 次阅读

由于苹果手机浏览器为了防止恶意网站通过各种跳转方式打开其它网站的安全机制，会拦截一些代码自动触发而不是由用户直接交互触发的方法，比如window.open()、超链接a标签等，最常见的是在异步请求的回调函数中执行window.open()跳转会被苹果浏览器认为是非用户交互执行的操作被拦截，如果你在点击某个元素进行AJAX异步调用并成功返回结果后window.open()没有跳转，多半是被拦截了。

一般的解决方法是使用location.href代码window.open()，或者使用setTimeout()函数或requestAnimationFrame()函数。

setTimeout()用于延迟执行代码的定时器函数，可在指定毫秒数后执行一次函数或代码段，常用于延迟执行、定时任务、动画效果等场景。

requestAnimationFrame()是用于创建流畅动画的浏览器原生 API，其核心作用是‌根据屏幕刷新率自动调用回调函数‌，从而解决传统定时器（如setTimeout/setInterval）因执行时机不稳定导致的卡顿问题。

个人推荐使用后者。

代码：

success: function(data) {
	data = JSON.parse(data);
	if (data.success) {
		setTimeout(()=>{
			window.open("https://www.tddx.net/");
		},10);
	}
}

或者

success: function(data) {
	data = JSON.parse(data);
	if (data.success) {
		requestAnimationFrame(()=>{
			window.open("https://www.tddx.net/");
		});
	}
}

上面代码为截取AJAX返回部分代码。