解决safari浏览器拦截window.open

现象

最近在做项目的时候碰到了使用window.open被浏览器拦截的情况，虽然在本地的环境可以对浏览器设置操作，但是对用户来说，不能要求用户都来通过拦截。

可以发现，当window.open为用户触发事件内部或者加载时，不会被拦截，一旦将弹出代码移动到ajax或者一段异步代码内部，马上就出现被拦截的表现了。

原因

一般情况下，如果直接在js中调用window.open()函数去打开一个新窗口，浏览器检测到的是非用户操作产生的新弹出窗口，就会对其进行阻止。因为浏览器认为这可能是一个广告，不是一个用户希望看到的页面。

window.open('//www.baidu.com', '_blank');

经过查阅资料，总结以下5个方案，目前采用的是方案2

方案一：而对于如下代码:
```
document.body.addEventListener('click' function() {window.open('//www.baidu.com, '_blank');
});
```
优点：所有浏览器都不会拦截
缺点：只要点击页面元素都会进行跳转，不是很友好
方案二：使用a标签替代，代码如下
```
 const a = document.createElement('a');a.href = location.origin+'adress'document.body.appendChild(a)a.click()document.body.removeChild(a)
```
优点：模拟a标签，利用a标签的href进行页面的跳转，兼容所有浏览器
缺点：需要创建a标签

表单提交的方式

       const form = document.createElement('form');form.action = 'www.baidu.com?id=1';form.target = '_blank';form.method = 'POST';document.body.appendChild(form);form.submit();

如果需要传递参数时，需要使用 POST 方法，默认的 GET 方法无法传递参数。也就是新页面的url中没有参数部分。

通过JS打开新窗口会被拦截，换一种实现方式（与5相似，5是放在异步执行之后在页面跳转）

 const tempPage=window.open('_blank'); // 先打开一个空页面tempPage.location='http://www.baidu.com'; //目标的页面地址

先弹出窗口，然后重定向

建议在打开第一个地址的时候给出一个类似‘当前页面正在加载中，请稍后…’的简单提示，可以避免打开两次真正的目标页面，让用户察觉到页面的重定向。
```
 dom.addEventListener('click', function () {const tempPage = window.open('loading page');ajax().done(function() {// 重定向到目标页面tempPage.location.href = 'target url';});});
```

解决safari浏览器拦截window.open相关推荐

解决safari浏览器 100vh 问题
解决safari浏览器 100vh 问题通过 CSS 变量计算 1vh 所表示的实际高度设置一个 CSS 变量(比如 --vh),然后通过 JavaScript 脚本动态设置 --vh 的值,然后 ...
解决Safari浏览器下载文件文件名称乱码的问题
解决Safari浏览器下载文件文件名称乱码的问题参考文章: (1)解决Safari浏览器下载文件文件名称乱码的问题 (2)https://www.cnblogs.com/itsharehome/p/ ...
ios中safari浏览器中window.open()无效的问题
除了sadari以外的浏览器,点击按钮后都会成功开启新页面.而在safari中认为window.open()是一种弹窗,而safari浏览器阻拦弹出式视窗.我这里是在uniapp中处理的方式,其他可自 ...
js 解决Safari浏览器中实现支付宝网页支付无法拉取支付宝APP的问题
简单介绍项目情况: 支付宝支付第三方公司提供支付接口,返回结果是一个加密的完整的网页. 自己写的下单业务这些.但是在页面上实现支付过程的时候,在Android手机上面无论哪种类型的浏览器都能实现自动 ...
解决safari浏览器打开页面会报错` Invalid Date`问题
使用 <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" formControlName="star ...
解决safari浏览器出现地址栏和工具栏时样式被遮挡的问题
在ios上使用safari浏览器时,有时候会发现不出现上下地址栏和工具栏时样式正常,但是出现地址栏和工具栏时,部分元素会被工具栏遮挡,部分元素会被工具栏往上顶,区别是fixed定位会随着地址栏和工具栏 ...
Mac 打开safari浏览器直接卡死解决方法，解决Safari浏览器访问网页卡死重新再打开浏览器还是卡死实例演示
safari 在某一次浏览网页时卡死,点击各种按钮都没效果,重新输入地址也不行. 之后每次杀掉进程重新打开还是卡死,由于默认还是自动加载之前关闭时访问的页面. 解决方法: 打开 safari 但不自动 ...
解决Safari浏览器input输入框在disabled不显示文字
.el-input {&.is-disabled {.el-input__inner{color: #a8abb2;opacity: 1;-webkit-text-fill-color: #a ...
中无法打开源文件_Safari浏览器无法打开，如何解决Safari在Big Sur中崩溃的情况...
macOs Big Sur的beta版本比最新版本的macOS更长,已于6月发布给开发人员.但是,这并不意味着最终版本完全没有问题.从来没有软件.有太多的变数和机会让错误潜入. 某些用户在Big Su ...

解决safari浏览器拦截window.open

现象

原因

解决safari浏览器拦截window.open相关推荐

最新文章

热门文章