碰到一个问题:浏览器打开微信返回的一个授权链接总是被浏览器拦截,除非设置浏览器可弹出此窗口才可以打开,但是这样用户体验不好,就采取其他方式解决;
一开始我以为只是因为这个链接的安全性问题,所以会被浏览器拦截,所以就使用了其他方式来打开此链接,发现还是会被拦截;
后来发现根本原因是ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所以被拦截。
述问题在我解决问题时,也分为了两种场景:
1、ajax 返回成功后立即调用window.open()方法,代码如下:
//新添加代码
let newTab = window.open("about:blank");
$.ajax({
type: "post",
url: xxx,
data: JSON.stringify(params),
contentType: "application/json;charset=UTF-8",
success: function (response) {
if (response.head.code === "00000000") {
//新添加代码
newTab.location.href = "www.baidu.com";
}else if (response.head.code === "11111111") {
} else {
}
}
});
2、 ajax执行后,还需要对ajax返回结果进行业务判断,根据不同的业务还需要弹出确认框进确认,然后根据相应的操作再决定是否跳转,
那么这里如果还是跟场景一一样的ajax调用执行前就打开窗口的话,很显然交互上面就不合适了,代码如下:
$.ajax({
type: "post",
url: "/xxxx/xxxx",
async: false,// 只加了个同步
data: {"param": param},
error: function (data) {
showError(data);
},
success: function (data) {
if (data.errorFlag == 0) {
if (data.status == 1) {
} else {
window.open("www.baidu.com");
}
} else {
}
}
});
根据不同的业务需求,对应不同的解决方法,不过如果不是必须一定要用异步的话,场景二的解决办法改动最小,最实用!!!