在Ajax请求中以_blank方式请求新的页面会被拦截

系统 1700 0

呃。。标题实在是不知道怎么描述比较合适,先说发现此问题的背景吧:

 

在项目中有这样的一个应用场景,用户点击页面的一个button,然后对用户的信息进行异步校验,校验通过之后触发一个请求,请求的目标页面需要打开新的页面,也就是请求的action的target属性为“_blank”,但是在测试时发现新开页面会被浏览器拦截,模拟场景代码如下:

 

    <html>
	<head>
		<title>Test for ajax</title>
		<script type="text/javascript" src="jquery.js"></script>
	</head>
	<body>
		<h1>Index Page</h1>
		<a href="#" id="button">提交</a>
		<script type="text/javascript">
			$("#button").click( function() {
				$.ajax({
					url : "#", //url为校验用户信息的方法
					async : true,
					success : function() {
						window.open("http://www.baidu.com");//window.open效果等于target='_blank'
						return false;
					}
				});
				return false;
			})
		</script>
	</body>
</html>
  

说明:代码如上所示,当点击“提交” button时,调用ajax方法,当ajax返回成功响应后打开http://www.baidu.com,但是结果却是页面被浏览器拦截,如下图所示:

页面被拦截

解决方案:把ajax方法的async属性值设置为false,如下:

 

    $.ajax({
	url : "#", //url为校验用户信息的方法
	async : false,	//同步属性设为false
	success : function() {
		window.open("http://www.baidu.com");//window.open效果等于target='_blank'
		return false;
	}
});
  

这样,再次测试后就能正常打开新的页面了。

 

注:为什么会被浏览器拦截还没找到原因,估计是处于安全考虑。

不过根据w3cschool所述,一般是 不推荐使用 async=false, JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。具体参见: AJAX - 向服务器发送请求

在Ajax请求中以_blank方式请求新的页面会被拦截


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论