window.open瀏覽器彈出新窗口被攔截—原因分析和解決方案

 最近在做項目的時候碰到了使用window.open被瀏覽器攔截的情況，在本機實驗沒問題，到了服務器就被攔截了，火狐有攔截提示，360瀏覽器攔截提示都沒有，雖然在自己的環境可以對頁面進行放行，但是對用戶來說，不能要求用戶都來通過攔截。何況當出現攔截時，很多小白根本不知道發生了啥，不知道在哪里看被攔截的頁面，百思不得其解，后來查了一下，各家瀏覽器支持的不一樣。

 

 

另外，可以發現，當window.open為用戶觸發事件內部或者加載時，不會被攔截，一旦將彈出代碼移動到ajax或者一段異步代碼內部，馬上就出現被攔截的表現了。

 

使用了一個可定制彈出窗口的外觀、尺寸大小、彈出位置以適應該頁面的window.open()方法，代碼如下：

 

<SCRIPT LANGUAGE="java script:>
<!--
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,
location=no,status=no')
//寫成一行
-->
</SCRIPT>

 

 

參數解釋：
window.open 彈出新窗口的命令；
page.html 彈出新窗口的文件名；
newwindow 彈出窗口的名字（不是文件名），可用空 ″代替；
height=100 窗口高度；
top=0 窗口距離屏幕上方的像素值；
left=0 窗口距離屏幕左側的像素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar,scrollbars 表示菜單欄和滾動欄；
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；

 

 

原因分析

 

當瀏覽器檢測到非用戶操作產生的新彈出窗口，則會對其進行阻止。因為瀏覽器認為這可能是一個廣告，不是一個用戶希望看到的頁面。

 

解決方案：

1、使用a標簽替代

 

給出如下函數，將此函數綁定到click的事件回調中，就可以避免大部分瀏覽器對窗口彈出的攔截：

function newWin(url, id) {
              var a = document.createElement(‘a‘);
              a.setAttribute(‘href‘, url);
              a.setAttribute(‘target‘, ‘_blank‘);
              a.setAttribute(‘id‘, id);
              // 防止反復添加
              if(!document.getElementById(id)) {
                  document.body.appendChild(a);
              }
              a.click();
  }

 

2、使用form的submit方法打開一個頁面

這種方法需要構造一個from，然后由js代碼觸發form的submit，將表單提交到一個新的頁面，如：

 

$("#tijiaos").attr('target', '_blank');
        $("#tijiaos").submit();

 

 

大家注意，以上兩種方法不適合放在ajax的回調函數中，如果放在回調函數中，依然會被瀏覽器攔截。

 

3、終極解決方案–先彈出窗口，然后重定向

第三種方案，其實是一種變通方案，核心思想是:先通過用戶點擊打開頁面，然后再對頁面進行重定向。示例代碼如下：

 

 

xx.addEventListener(‘click‘, function () {
            // 打開頁面，此處最好使用提示頁面
　　      var newTab=window.open('about:blank');

            ajax().done(function() {
                // 重定向到目標頁面
                newWin.location.href = ‘target url‘;
            });
        });

 

 

以上方法其實是打開了兩個地址，所以建議大家打開第一個地址的時候給出一個類似‘當前頁面正在加載中，請稍后。。’的簡單提示頁，這樣可以避免打開兩次真正的目標頁面，讓用戶察覺到頁面的重定向。

 

 

補充：

JS打開新窗口的2種方式

1.超鏈接<ahref="http://www.jb51.NET" title="腳本之家">Welcome</a>

等效於js代碼

window.location.href="http://www.jb51.Net";    //在同當前窗口中打開窗口

 

2.超鏈接<ahref="http://www.jb51.net" title="腳本之家"target="_blank">Welcome</a>

等效於js代碼

window.open("http://www.jb51.net");                //在另外新建窗口中打開窗口

3、關閉新窗口：

 

this.window.opener =null;  

window.close();