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

来源：互联网发布：如何在国外注册域名编辑：程序博客网时间：2024/06/11 08:22

场景：
业务系统需要跳转到其他系统-支付平台去完成支付，使用的 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

0 0