form target 被拦截解决方案

╰半夏微凉° 2022-08-24 11:17 189阅读 0赞

解决JS弹出新窗口被浏览器阻止的解决方案  
form target 被拦截  
$("\#add\_build\_form").submit(); 写在了ajax post中，肯定会被拦截

如果是用户触发的一个click事件中写$("\#add\_build\_form").submit();，则会正常弹出窗口

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

Html代码 [![收藏代码][icon_star.png]][icon_star.png 1]

1.  **<****html****>**
2.  **<****head****>**
3.  **<****title****>**Test for ajax**</****title****>**
4.  **<****script** type="text/javascript" src="jquery.js"**>****</****script****>**
5.  **</****head****>**
6.  **<****body****>**
7.  **<****h1****>**Index Page**</****h1****>**
8.  **<****a** href="\#" id="button"**>**提交**</****a****>**
9.  **<****script** type="text/javascript"**>**
10.  $("\#button").click( function() \{ 
11.  $.ajax(\{ 
12.  url : "\#", //url为校验用户信息的方法 
13.  async : true, 
14.  success : function() \{ 
15.  window.open("http://www.baidu.com");//window.open效果等于target='\_blank'
16.  return false; 
17.  \} 
18.  \}); 
19.  return false; 
20.  \}) 
21. **</****script****>**
22. **</****body****>**
23. **</****html****>**

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

![页面被拦截][5e505b69-0a9a-306c-a29c-b3a4a12b584d.jpg]

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

Html代码 [![收藏代码][icon_star.png]][icon_star.png 1]

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

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

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

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

[icon_star.png]: http://chenzhou123520.iteye.com/images/icon_star.png
[icon_star.png 1]: /images/20220823/0181b05128334d9db7e4518e4e3a840c.png
[5e505b69-0a9a-306c-a29c-b3a4a12b584d.jpg]: /images/20220823/1cb404043f4a418dae165ff07287e177.png
[AJAX -]: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp