今天写代码遇到了window.open被浏览器阻拦的问题, 需求是发送一个ajax请求, 应答的对象里有value属性如果不为空, 就根据这个value的信息保存sessionStorage, 然后根据sessionStorage打开一个新页面, 显示商品详情页, 如果value属性为空, 就不打开新窗口, 在原窗口显示一下已有的基本信息.
经过试坑, 完成不了需求. 放弃了....试坑过程总结一下.
尝试失败的方法
angular的$watch服务
由于屏蔽原因可能是我在ajax回调里使用了window.open(), 所以思路是把window.open拿出来不放在回调里, 所以设置了个变量用于查看状态$scope.aaa, 在回调里改变值, 然后$scope.$watch监控变量, 然后调用window.open().
经过尝试这种方法还会被屏蔽.
失败
定时器方法
在回调里用了setTimeout, 再打开window.open(), 还被屏蔽.
失败
新建a标签, 使用a.click方法
function newWin(url) {
var a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('style', 'display:none');
a.setAttribute('target', '_blank');
document.body.appendChild(a);
a.click();
a.parentNode.removeChild(a);
}
不好使, 失败~
可能有用的方法
window.open 打开页面被浏览器阻挡的问题
(懒得试了, 即使好用也满足不了我的需求)
由于比较新的浏览器都加了一个机制，就是window.open不能够异步加载，也就是说，你用ajax请求了某个接口以后再去window.open一个新的页面，它很大可能被浏览器阻挡了，除非你调整了浏览器的机制。
那么有没有好的方法进行解决这个问题呢？
有的人说用window.location.href来跳转，这个在PC端可以，但是也是有一个问题就是会覆盖当前的页面。而且移动端，如果是打开doc或者pdf文件，Safari或者其它的一些浏览器还是会不跳转。
那么我们还是要回到window.open来进行方案布局了。
由于浏览器需要用户操作后才能够跳转，那么我们就在用户click或者touch等事件后直接调用一下window.open，至于第一个参数你传什么都没有所谓，如果要美观，可以传一个自己写好的loading页面，可以理解成为一个中转页面。
当你的url生成完，也就是异步回调后拿到了需要跳转的url，再去替换。
伪代码如下：
downloadProtocolInterFace(id) {
let open = window.open('../download');//打开另一个页面被拦截的问题和window.location.href
//下载协议，设计方案需要而录入方案无
this.load = loading(this, "下载协议中...");
let data = {
plan_item_id: id //方案授予ID
};
approver
.downloadProtocol(data)
.then(res => {
if (res.retCode === 0) {
if(!open) {
window.location.href = res.data.file_path;
}else {
open.location = res.data.file_path;
}
} else {
this.errorShow(this.approverErrorData);
}
this.load && this.load.close();
})
.catch(err => {
this.load && this.load.close();
if (err && err.data && err.data.errMsg) {
this.$message.error(err.data.errMsg);
this.reload();
}
});
},
作者：诸葛韩信
来源：CSDN
原文：https://blog.csdn.net/qq_31968791/article/details/93979310
版权声明：本文为博主原创文章，转载请附上博文链接！
