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