【web前端】关于页面中 JS 中windown.open( )方法打开新页面有可能会被浏览器拦截的问题

前言，在项目中突然间遇到了一个情况，同样的代码怎么有点地方window.open()打开的新页面不被拦截，有的地方又被拦截了呢，我百思不得其解，于是上网查了下，终于明白这是什么原因了，下面一一讲述。

   现在，先讲下打开新页面的方法，主要有一下几种：

       第一种：a标签 '<a href="test.php"target="_blank">，target="_blank"为打开一个新的窗口，否则，为当前页面跳转到指定页面；

       第二种：form表单'<form action="drag.html" method="get" id="form" target="_blank"/></form>',提交表单即可打开新页面，target='target',则将表单信息提交至新打开的指定页面，否则当前页面跳转到指定页面；

      第三种：window.location  执行window.location='test.php',页面将跳转到指定页面。

      第四种：window.open(url);执行window.open('test.php'),将会打开心新的指定页面，当前页面不变。 

      现在在对浏览器打开新页面的问题做一下简单小结，浏览器对于用户点击行为直接打开的页面一般不会拦截，比如不通过JS直接点击a、提交form表单，浏览器是不会阻止其跳转页面或者打开新页面行为的。但是对于JS打开新页面浏览器会好好审核的，如下面的例子，很多浏览器回去拦截。

<form action="test.php" method="get" id="form" target="_blank"/>//target为弹出新窗口
    <input type="hidden" name="name" value="ck">
    <input type="hidden"id="pwd"  name="id" value="123456">
    <input type="submit" style="display:none;"  value="提交"> 
</form>
<button id="btnSubmitForm">点击我提交表单</button>
<button id="btnAjaxSubmitForm">点击我发送ajax提交表单</button>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
    $("#btnSubmitForm").on('click,function(){
         window.open(url);
        $("#form").submit();
    })
    //下面这种代码是系统自动执行的默认会被拦截。
    window.open(url);
    $("#form").submit();
    $("#btnSubmitForm").trigger('click');
     
    $.post(url,json,function(){
        //下面两种也会被浏览器当成广告给拦截掉。浏览器认为ajax发送之后执行的以下事件等同于系统自动触发的都会去阻止。
        window.open(url);
        $("#form").submit();
        $("#btnSubmitForm").trigger('click');
    })
</script>

  上面是最简单的2种会被浏览器当成广告的情况，那么该如何避免避免这种情况呢，很简单，我们可以通过以下方法：

<form action="test.php" method="get" id="form" target="_blank"/>//target为弹出新窗口
    <input type="hidden" name="name" value="ck">
    <input type="hidden"id="pwd"  name="id" value="123456">
    <input type="submit" style="display:none;"  value="提交"> 
</form>
<button id="btnSubmitForm">点击我提交表单</button>
<button id="btnAjaxSubmitForm">点击我发送ajax提交表单</button>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
 //  第一种方法点击直接触发window.open()或者$(form).submit();
    $("#btnSubmitForm").on('click,function(){
         window.open(url);
        $("#form").submit();
    })
     
    //第二种方法 若是点击发送ajax触发方法，这里要强调一下不管是自动发送ajax还是手动发送ajax成功之后调用的方法内部用Window.open()或者$(form).submit()都可能会被认为是广告。下面我的解决方法是，手动同步发送ajax，之后
将ajax的值赋予变量，再在ajax方法之后调用Window.open()或者$(form).submit()就可以避免这种问题。
   $("#btnAjaxSubmitForm").on('click,function(){
        
       $.ajax({
        url: "test.php",
        async: false,
        success:function(){
         }
    })
    Window.open()或者$(form).submit()    
    })
    这样就没问题了。
     
</script>