在Ajax请求中以_blank方式请求新的页面会被拦截
程序员文章站
2022-04-17 18:55:04
...
呃。。标题实在是不知道怎么描述比较合适，先说发现此问题的背景吧：
在项目中有这样的一个应用场景，用户点击页面的一个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 - 向服务器发送请求
上一篇： 使用Gitee管理简单项目