form target 被拦截解决方案

最新推荐文章于 2022-07-17 11:06:56 发布

baicp3

最新推荐文章于 2022-07-17 11:06:56 发布

阅读量5.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/baicp3/article/details/36901035

版权

js 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

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

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

    Html代码   
    
  
 <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，如下：

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