學習window.open()及問題分析

　　以前對window.open()理解的不透徹，最近因為產品需要，重新學習了一下，以下為一些收獲和問題總結：

調用方式：window.open(url , winName , style);

　　url：彈出窗口的路徑【必選】

　　winName：彈出窗口的名字【可選】

　　style：彈出窗口的樣式（類型為字符串，結構如“attr1=xxx1,attr2=xxx2”，不能有空格，關於這個參數的可選值網上很多，在此不做贅述。需要注意的是其中很多屬性在瀏覽器中表現差異較大，建議對窗口樣式要求不高時選擇window.open）【可選】

 

 　　通過代碼創建一個簡單的窗口：

window.open("Content.html",'windowopen',"width=400px,height=400,left=500,top=100")

                 

 　　可以看到同樣的樣式在不同瀏覽器中的表現是不同的，以下是測試中考慮到的一些條件及實際測試結果（T為支持，空為不支持）：

    

關於瀏覽器阻止彈出新窗口

　　不同瀏覽器對js控制自動彈出的window會進行攔截，但如果是用戶主動觸發標簽發生的事件則不會阻止，所以如果是正當作用的彈框，大可以放心的通過用戶行為觸發事件。

關於彈窗數量

function openWin() {                  
　　return window.open("Content.html","windowopen","width=400px,height=400,left=500,top=100");
}

$(".btn1").click(function() {
      subPage = openWin();
 });

　　　　以上代碼表示，點擊按鈕btn1，彈出一個名為windowopen的窗口

　　　　1）同名的窗口會在同一個彈窗中彈出，所以以上代碼中的btn1不管點擊多少次（已彈出的窗口不關閉），都不會再彈出第二個彈窗，只是刷新彈窗中的頁面

　　　　2）如果想每次點擊都彈出新的彈窗（已彈出的窗口不關閉），可以在winName上加一個隨機數，保證每次彈出的彈窗名不同（需要注意的是winName不可過長，否則IE8/9會報錯）

　　　　3）也可以實現點擊一次，彈出多個彈窗，前提是幾個彈窗的winName不同，否則只會彈出一個彈窗，代碼如下：

function openWin() {                  
　　window.open("Content.html","windowopen1","width=400px,height=400,left=500,top=100");
　　window.open("Content.html","windowopen2","width=400px,height=400,left=500,top=100");
}

$(".btn1").click(function() {
       openWin();
 });

關於父子頁面間訪問

　　　　子頁面(Content.html)->父頁面(OpenWin.html)：

　　　　子父頁面分別屬於兩個窗體，【子頁面】中可以通過window或self訪問自身元素，可以通過window.opener訪問打開子窗口的父窗口中的元素。

　　　　在子窗體控制台打印window.opener，返回的是父窗口的window對象

　　　　

      　　父頁面(OpenWin.html)->子頁面(Content.html)：

　　　　【父頁面】中可以通過window訪問自身元素，可以通過window.open()方法的返回值，訪問子頁面中的元素（需要注意的是，要想獲取子窗口的window對象，子窗口必須處於彈出狀態，否則獲取的返回值為undefined），代碼如下：　　　　　

var subPage = null;//子窗口返回值

function openWin() {
　　return window.open("Content.html", 'windowopen', "width=400px,height=400,left=500,top=100");
}

//打開子窗口
$(".btn1").click(function() {
　　subPage =  openWin();
});

//獲取子窗口
$(".btn1_get").click(function() {
　　if (subPage) {
    　　console.log(subPage)；
    }
});

　　　　

　　　　可以看到控制台輸出的結果就是子窗口的window對象。

 

=========在此插播測試父子頁面間訪問是出現的一個問題============

　　條件：父子頁面引入jQuery文件，並在父頁面的某個標簽上通過$jq.data("key1","val1")存入數據，希望從子頁面訪問該標簽上的數據

　　子頁面代碼：

　　

　　但實際輸出結果為空對象，為毛？

　　受高人指點過后，發現自己犯了一個錯誤，jQuery被引入后，會將自己的命名空間掛在window對象中，jQuery提供的所有方法都在其命名空間下，而$jq.data("key1","val1")的數據實際並不是存儲在調用它的$jq上，而是存儲在window.jQuery.cache對象中：

　　

　　而父頁面和子頁面分別從屬於其各自的兩個window對象，也就是說，我在父頁面中使用$jq.data("key1","val1")存儲的數據，只存在於父窗體的jQuery.cache中，而如下代碼實際上使用的是當前window（子窗體）中的jQuery，而子窗體中的jQuery中並沒有存儲父窗體中的信息。　

　　

　　正確的寫法為：

　　

　　============完畢============

 關於beforeunload事件

　　beforeunload：可以用在BODY, FRAMESET, window元素上，顧名思義，表示在頁面卸載前執行，具體執行時機如下：

　　·關閉瀏覽器窗口
　　·通過地址欄或收藏夾前往其他頁面的時候
　　·點擊返回，前進，刷新，主頁其中一個的時候
　　·點擊 一個前往其他頁面的url連接的時候
　　·調用以下任意一個事件的時候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
　　·當用window open打開一個頁面，並把本頁的window的名字傳給要打開的頁面的時候。
　　·重新賦予location.href的值的時候。
　　·通過input type=”submit”按鈕提交一個具有指定action的表單的時候。

 

　　可以通過DOM0級事件綁定為該事件綁定一個函數：

window.onbeforeunload = function (e) {
    return "呵呵不讓你關";
}

 

　　該事件可以返回一個字符串，作為卸載頁面前提示用戶確認卸載的提示語（該返回值在火狐無效，被直接無視）

　　

　　后面又測試了使用DOM2級事件綁定為該事件綁定一個函數：

　　

　　實際測試發現，只有IE和safari支持該綁定方式，此外，為window綁定多個beforeunload事件，僅第一次綁定的函數被執行了，故建議在對beforeunload事件進行綁定時，使用DOM0級綁定。