window.open方法解析

標籤：des   style   blog   http   color   使用   os   io   

一、前言最近在項目中需要新視窗開啟一個第三方的頁面，大家都知道，使用window.open開啟新視窗某些情況下會被瀏覽器的屏蔽程式阻止。如果要開啟的URL是通過AJAX擷取的，就一定會被瀏覽器攔截。為瞭解決這個問題，溫習了window.open的詳細用法。記錄下來備忘。 二、window.open有兩個用途（1）、導航到指定的URL（2）、開啟一個新視窗。該應用情境比較常見。先看一個完整樣本，開啟招商銀行福士版：

var cmbBankWin = window.open(‘https://pbsz.ebank.cmbchina.com/CmbBank_GenShell/UI/GenShellPC/Login/Login.aspx‘, ‘newhb‘, ‘menubar=no,toolbar=no,location=no,directories=no,scrollbars=yes,status=yes,resizable=yes‘);

三、參數說明參數一、要載入的URL參數二、視窗目標。在該名稱的視窗或架構中載入第一個參數指定的URL。如果該參數指定的視窗不存在，則會按照第三個特性參數建立新視窗或者新標籤頁。如果沒有第三個參數則建立預設視窗（工具列、地址欄、狀態列）。參數三、特性字串。樣本：height=400,width=400,top=10,left=10參數四、新頁面是否取代瀏覽器記錄中當前載入頁面的布爾值。只在不開啟新視窗的情況下使用該參數。 四、第三個參數支援的特性值：fullscreen 是否最大化開啟。僅IE有效。heightwidthtopleftlocation 是否顯示地址欄scrollbars 內容在視口中顯示不下，是否允許滾動status 是否顯示狀態列toolbar 是否現在工具列menubar 是否顯示功能表列resizable 是否可以通過拖拽瀏覽器邊框改變視窗大小 五、操作開啟的新視窗cmbBankWin.resizeTo(500, 500);cmbBankWin.moveTo(100, 100);cmbBankWin.close() 該方法僅適用於通過window.open開啟的新視窗，對於瀏覽器的主視窗，未得到使用者允許不能關閉。 六、傳回值說明window.open會返回指向新視窗的引用 七、新視窗與原始視窗之間的參考關聯性擷取原始視窗的引用cmbBankWin.opener有些劉瀏覽器（IE8、chrome）會在獨立的進程中運行新的標籤頁。如果一個標籤頁開啟另一個標籤頁，如果兩個window對象之間需要彼此通訊，那麼新開的標籤頁就不能在獨立的進程中運行。在chrome中，將新建立的標籤頁的opener屬性設定為null，即表示在單獨的進程中運行新標籤頁。如：cmbBankWin.opener = null 八、安全限制瀏覽器廠商為了讓使用者免受廣告彈窗的騷擾，採取了以下措施：不允許修改狀態列不允許將快顯視窗移動到螢幕以外不允許在螢幕之外建立快顯視窗 九、快顯視窗屏蔽程式很多瀏覽器都有快顯視窗屏蔽程式，還有很多瀏覽器外掛程式可以屏蔽快顯視窗，比如Yahoo!Toolbar寫一段檢測快顯視窗被屏蔽的程式：

function isBlocked(){    var blocked = false;    try{        var cmbBankWin = window.open(‘https://pbsz.ebank.cmbchina.com/CmbBank_GenShell/UI/GenShellPC/Login/Login.aspx‘, ‘newhb‘, ‘menubar=no,toolbar=no,location=no,directories=no,scrollbars=yes,status=yes,resizable=yes‘);        if(cmbBankWin == null){            blocked = true;        }    }catch(ex){        blocked = true;    }    return blocked;}

 十、如何繞過瀏覽器的屏蔽程式，順利開啟一個新視窗？（1）、手動修改瀏覽器的安全層級：不同的瀏覽器修改安全層級的方式不同，以下為chrome解除阻止的方式：步驟一、 步驟二、 步驟三、步驟四、
  （2）、但是作為技術人員，我們需要通過指令碼解決問題，而不是提示使用者去修改自己的瀏覽器設定。以下措施是我們常用的方法：1、動態建立A標籤，取到URL後設定A標籤的href屬性，用指令碼調用A標籤的click事件。2、動態建立Form表單，target屬性設定為_blank，method屬性為get。用指令碼提交表單。注意通過這種方式開啟的URL無法攜帶參數，傳遞參數需要通過隱藏欄位（input type=‘hidden‘）來做。代碼如下：

function openNewWin (url) {        var r = document.documentElement;        var f = document.createElement("form");        f.target = "_blank";        f.method = "get";        setParams(url);        r.insertBefore(f, r.childNodes[0]);        f.action = url;        f.submit();                $(f).remove();                function setParams(url){            var paramsObj = $T.Url.getQueryObj(url);            var inputTemplate = ‘<input type="hidden" name="{0}" value="{1}" />‘;            for(var name in paramsObj){            if(paramsObj.hasOwnProperty(name)){            $(f).append($TextUtils.format(inputTemplate, [name, paramsObj[name]]));            }            }        }    }

3、通過以上兩種方式，如果URL是通過AJAX擷取的chrome瀏覽器仍然會阻止，IE8不會。可用以下方式解決：步驟一、先彈出新視窗 步驟二、 AJAX返回地址後再改變新視窗的location.href屬性 完整的程式碼範例如下：

var newWin = window.open(‘about:blank‘); // 先彈出新視窗var options = {};options.success = function(url){    newWin.location.href = url; // AJAX返回地址後再改變新視窗的location.href屬性};options.error = function(result){   console.log(result); };self.model.getUrl(options);// 非同步擷取URL地址