一、原因
浏览器为了维护用户安全和体验,在JS中直接使用window.open(url,"_blank")来打开新的链接是会被拦截的,(window.open(url,”_self”)改变当前的窗口是可以生效的),通常项目需要在ajax异步请求完成后来打开新链接,下面提供几种解决方案
二、解决方案
方案一、
创建一个a标签,利用a标签跳转,能解决大多数浏览器兼容问题,但是这种方法写在ajax异步请求完成后调用无效
function openWin(url) {
var a = document.createElement("a"); //创建a标签
a.setAttribute("href", url);
a.setAttribute("target", "_blank");
document.body.appendChild(a);
a.click(); //执行当前对象
}
openWin("./page/......");
方案二、
模拟form表单提交,能解决大多数浏览器兼容问题,但是这种方法写在ajax异步请求完成后调用无效
var form = document.createElement('form');
form.action = '"./page/a.html?id=1';
form.target = '_blank';
form.method = 'POST';
document.body.appendChild(form);
form.submit();
方案三、
在ajax调用之前先打开窗口,然后再设置新窗口的url来达到跳转的效果,但是该方法如果ajax响应太慢,则会出现一个空白窗口,影响用户体验,所以建议给该新窗口增加提示“正在拼命加载中”,但是我觉得这个并不是最好的解决方案
//先在ajax函数之前打开新窗口,后再加载url
$('#btn').click(function () {
//打开一个不被拦截的新窗口
var win = window.open();
win.document.body.innerHTML="正在拼命加载中......";
$.ajax({
url: 'a.com',
success: function (url) {
//修改新窗口的url
win.location.href = url;
}
})
});
方案四、
把ajax异步改成同步,该方法会阻塞浏览器运行导致卡顿,经过测试,就算改成同步,chrome还是会阻拦,Firefox不会阻拦
//先在ajax同步函数之后打开新窗口
$('#btn').click(function () {
$.ajax({
url: 'a.com',
async: false, // 同步,意味着执行该ajax完成后,后续代码才继续运行
success: function (url) {
}
});
//执行完ajax后再打开新窗口
window.open("./page/......", "_blank");
});
方案五、
把ajax执行完后,弹出一个弹出框提示用户,由用户确认点击打开,这个方法目前感觉是最友好的
$('#btn').click(function () {
$.ajax({
url: 'a.com',
success: function (url) {
option.open({
//type: 1,
icon: 3,
title: "支付",
btn: ['立即查看', '取消'],
content: "文件已经校验成功,请查看结果",
btn1: function (index) {
option.closeAll();
window.open("./page/......");
},
btn2: function (index) {
option.closeAll();
}
});
}
});
});