ajax请求里面调用window.open会被浏览器拦截

场景：

业务系统需要跳转到其他系统-支付平台去完成支付，使用的 window.open(url)，跳转之前需要做一系列的ajax验证，

那么问题来了，window.open放在ajax校验完成并且成功后才会调用，这时浏览器会觉得这个弹窗不是用户操作想看到的，

所以自动进行了拦截！

上述问题在我解决问题时，也分为了两种场景：

一、ajax 返回成功后立即调用window.open()方法，代码如下：

//去支付
function gotoPay(param) {
$.ajax({
type: "post",
url: "/xxxx/xxxx",
data: {"param": param},
error: function (data) {
showError(data);
},
success: function (data) {
if (data.errorFlag == 0) {
window.open("www.baidu.com");
} else {
layer.alert(data.desc, {icon: 2, title: '提示信息'})
}
}
});
}

对应的解决方案(在ajax执行前先打开窗口)：

//去支付
function gotoPay(param) {
// 新加
var newTab=window.open('about:blank');
$.ajax({
type: "post",
url: "/xxxx/xxxx",
data: {"param": param},
error: function (data) {
showError(data);
},
success: function (data) {
if (data.errorFlag == 0) {
// 新加
newTab.location.href = "www.baidu.com";
} else {
layer.alert(data.desc, {icon: 2, title: '提示信息'})
}
}
});
}

二、 ajax执行后，还需要对ajax返回结果进行业务判断，根据不同的业务还需要弹出确认框进确认，然后根据相应的操作再决定是否跳转，

那么这里如果还是跟场景一一样的ajax调用执行前就打开窗口的话，很显然交互上面就不合适了，代码如下：

//去支付
function gotoPay(param) {
$.ajax({
type: "post",
url: "/xxxx/xxxx",
data: {"param": param},
error: function (data) {
showError(data);
},
success: function (data) {
if (data.errorFlag == 0) {
if (data.status == 1) {

// 和场景一的区别就是这里需要根据业务状态弹框确认
layer.open({
//type: 1,
icon: 3,
area: ['500px', 'auto'],
title: "支付",
btn: ['确认支付', '取消'],
content: "订单当前状态为xxxxxx，确认继续支付吗？",
btn1: function (index) {
layer.closeAll();
window.open("www.baidu.com");
},
btn2: function (index) {
layer.closeAll();
}
});
} else {
window.open("www.baidu.com");
}
} else {
layer.alert(data.desc, {icon: 2, title: '提示信息'})
}
}
});
}

对应的解决方案如下：

//去支付
function gotoPay(param) {
$.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) {

// 和场景一的区别就是这里需要根据业务状态弹框确认
layer.open({
//type: 1,
icon: 3,
area: ['500px', 'auto'],
title: "支付",
btn: ['确认支付', '取消'],
content: "订单当前状态为xxxxxx，确认继续支付吗？",
btn1: function (index) {
layer.closeAll();
window.open("www.baidu.com");
},
btn2: function (index) {
layer.closeAll();
}
});
} else {
window.open("www.baidu.com");
}
} else {
layer.alert(data.desc, {icon: 2, title: '提示信息'})
}
}
});
}

综上，根据不同的业务需求，对应不同的解决方法，不过如果不是必须一定要用异步的话，场景二的解决办法改动最小，最实用！！！

上述两种方法测试通过 chrome   Firefox  ie