解决JS弹出新窗口被浏览器阻止的解决方案
form target 被拦截
$("#add_build_form").submit(); 写在了ajax post中,肯定会被拦截
form target 被拦截
$("#add_build_form").submit(); 写在了ajax post中,肯定会被拦截
如果是用户触发的一个click事件中写$("#add_build_form").submit();,则会正常弹出窗口
在项目中有这样的一个应用场景,用户点击页面的一个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 - 向服务器发送请求