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

news/2024/7/19 15:02:26 标签: js, 浏览器, ajax

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






http://www.niftyadmin.cn/n/1332758.html

相关文章

SHA1WithRSA 数字签名

在做支付业务的时候,需要验证信息的正确性,所以选取用到了数字签名,精简如下: 私钥签名,公钥验证签名. 业务平台(信息传送端):私钥 用于对传送数据进行签名(sign) 支付平台(信息接收端):公…

can not find a temporary directory:internal error

早上突然发现svn无法更新和提交代码,提示以下错误信息: 因为之前都是好的,突然出现的这个问题,怀疑是以下几点的问题: 1. 磁盘满了 df -lh 看了下确实磁盘满,删除一些不必要的文件就可以了 [df命令的…

图片验证码

前台页面&#xff1a; <li><span><em>*</em>验证码&#xff1a;</span><input type"text" class"input-txt yzm-w" name"imgCode" placeholder"请输入图片验证码"/><img src"/user/getVe…

intellij maven 创建新module

一、 二、 三、 四、目录结构&#xff1a;

ie 下uploadify上传插件失效报错

现象&#xff1a;js报错或者按钮需要点击两次才有效 报错信息如下&#xff1a; 解决方法&#xff1a;jquery.uploadify.min.js 原代码&#xff1a; SWFUpload.prototype.cleanUp function(a) {try {if (this.movieElement && typeof(a.CallFunction) "unknown&…

intellij maven 新建module不能创建java文件

新建module不能创建java文件&#xff0c;如图一中&#xff0c;根本没有创建Java Class文件的选项&#xff0c;根据图二操作即可&#xff01; 一、 二、根据下图设置后New选项里面就会有Java Class选项了。

PowerDesigner逆向生成MYSQL数据库表结构总结

由于日常数据建模经常使用PowerDesigner&#xff0c;使用逆向工程能更加快速的生成模型提高效率&#xff0c;所以总结使用如下&#xff1a; 1. 安装MYSQL的ODBC驱动 Connector/ODBC 5.1.10 下载地址&#xff1a; http://dev.mysql.com/downloads/connector/odbc/5.1.html …

FireFox+burpsuite安全相关使用

1. 需要以下三个文件&#xff0c;渗透版Firefox burpsuite 激活工具 keygenjar包是可以双击执行的&#xff0c;点击burp-loader-keygen.jar,如下图&#xff1a;点击上面的run&#xff0c;即可启动 Burp Suite Pro 软件.2. 打开Firefox需要设置代理3.使用步骤 具体操作步骤&…