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

最新推荐文章于 2021-08-06 07:05:44 发布

不知道取啥昵称

最新推荐文章于 2021-08-06 07:05:44 发布

阅读量9.8k

点赞数 4

分类专栏： WEB JS+AJAX+CSS 文章标签： js 浏览器 ajax

本文链接：https://blog.csdn.net/winy_lm/article/details/60959751

版权

WEB 同时被 2 个专栏收录

23 篇文章

订阅专栏

JS+AJAX+CSS

11 篇文章

订阅专栏

本文介绍了解决在业务系统中使用window.open()方法跳转到支付页面时遇到的自动拦截问题。通过调整代码逻辑，确保了弹窗能够正常显示，并提供了两种不同业务场景下的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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