說起來window.close()，這也是個“不太讓人省心”的角色。因為瀏覽器兼容性千差萬別，還對他有諸多限制。

使用語法：

window.close()

場景復現(xiàn)

昨天發(fā)現(xiàn)有人在csdn上傳違禁文件，舉報后來到了這個頁面：

里面那個按鈕發(fā)現(xiàn)點擊無效！
就。。。當時就挺尷尬的。

不過既然它說是【關(guān)閉】，當時就想到了這個堪稱“漏洞百出”的close事件，F(xiàn)12打開控制臺一看：果不其然

看到這頓時就來了興趣

探索過程和解決方案

為什么就突然來了興趣呢？

首先，從這行代碼中可以看出：這個頁面不是通過 window.open() “打開”的 —— MDN文檔中有說明：不是通過window.open()方法打開的窗口不能（直接）使用close進行關(guān)閉 （以前這條是針對Firefox的策略）

顯然，csdn這位工程師也看過文檔，所以想用【在本頁面打開空白頁，然后再強行關(guān)閉】的“取巧”方法。但我不知道當時是怎么測試的，還是說后來瀏覽器又加的限制，這行代碼在本文所寫時顯然在所有瀏覽器上都不能執(zhí)行！

現(xiàn)在讓我通過語法解釋一下上面的代碼：

//摘自：MDN
var window = window.open(url,windowName,[windowFeatures]);

方法明確指出三個參數(shù)，第三個參數(shù)一般用于在“彈出框頁面”處理長寬限制，和我們當前的問題沒有關(guān)系，我們就不再考慮。

MDN對url參數(shù)進行了說明，這個參數(shù)可以是個路徑，可以是個頁面/圖片/其他瀏覽器支持類型的資源的地址， 如果參數(shù)1你寫空串，會在指定的上下文環(huán)境中創(chuàng)建一個空頁面

我們看第二個參數(shù)windowName， 這個參數(shù)表示 你要指定資源在哪個窗口打開 ，如果你指定的窗口不存在，瀏覽器會創(chuàng)建一個新的窗口，并把這個窗口的window對象命名為windowName（可以通過window.name獲取到），值得注意的是，這并不是這個窗口的【title】,當你在別處使用<a>或<form>標簽時 可以將target屬性的值寫成 windowName 進行跳轉(zhuǎn)，訪問，為空時，一樣創(chuàng)建新窗口。

通過此處的描述我們可以知道， windowName的值應該與target的值是相同的。

既然說到了target，正好上面csdn用的也是a標簽，那我們就以a鏈接為例 （另一方面form不常用），為<a></a>添加 target 表示我要設(shè)置鏈接的打開方式

1._self —— 默認值，表示在當前上下文中打開，不需要寫
2._blank表示我要新創(chuàng)建一個tab/window
3._parent 表示在其上級上下文環(huán)境中加載，沒有上級時同_self
4._top表示在其頂級上下文環(huán)境中加載，沒有時同_self

所以現(xiàn)在常用的寫法就是：

• 首先調(diào)用 window.open('', ‘_self') 方法 ，參數(shù)1置空 參數(shù)2寫為_self 表示我們要在當前頁面加載一個空；
• 此時仿佛就是一個偷梁換柱的作用，通過加載進來一個空，將我們當前訪問的頁面變成window.open()打開的頁面

這個時候 是不是就可以愉快地使用window.close()方法并成功關(guān)閉當前頁面了？

可以！

筆者可以確切的告訴你，這種方法在本地測試絕大多數(shù)瀏覽器上都可以正常使用！
但偏偏在這里（本文開頭所說實例）不行！

還有一點是：如果你在a標簽的 href 中用了javascript:xxx;寫事件，那就千萬記得不能再加屬性target！

就在我焦頭爛額自我懷疑時，一師兄給我說了一個取巧的解決方案：about:blank

也可以！但似乎這并不是最好的方法！！！

再回到上面的代碼，我想了許久，莫不是 瀏覽器兼容性 的問題？
為此，我判斷了IE、Firefox、和其余瀏覽器（因為據(jù)說Firefox仍然在這個問題上表現(xiàn)地尤為激烈）：

// 兼容所有瀏覽器關(guān)閉頁面方法
function ClosePage(){  
  if (navigator.userAgent.indexOf("MSIE") > 0){
    if (navigator.userAgent.indexOf("MSIE 6.0") > 0){
      window.opener = null;
      window.close();
    } else {
      window.open('', '_top');
      window.top.close();
    }
  } else if (navigator.userAgent.indexOf("Firefox") > 0) {
    window.location.href = 'about:blank';
  } else {
    window.opener = null;
    window.open('', '_self', '');
    window.close();
  }
}

用這個方法，在各個瀏覽器上找網(wǎng)頁試了一下，效果還不錯。
但…
很多瀏覽器上會有和上面about:blank一樣的效果。

到這里我就納悶了，到底是為什么？
可能是瀏覽器對close的實現(xiàn)策略導致的。不過還沒等我納悶完，另一個消息就來了：這段代碼放到文首的那個頁面依然不行。。。（更新：在google和Firefox的一些網(wǎng)站如腳本之家也不能用?。?/p>

有點小懵，什么鬼？
csdn這里究竟用了什么導致“close事件不能執(zhí)行”？

一些小建議和結(jié)尾

這一點我不得而知。我后來分析了整個頁面，做了代碼復現(xiàn)，斷點調(diào)試。。。依然沒能發(fā)現(xiàn)問題出在哪里。

不過我從一開始就覺得：這種方式——不論是“關(guān)閉頁面”還是“打開一個空頁面提示”，它的效果似乎都還不如“返回瀏覽器首頁”好：

let historyLen = window.history.length;
window.history.go(-historyLen+1)

更新：
這里其實是有問題的，因為用戶如果“主動”觸發(fā)瀏覽器上面的“返回上一頁”的按鈕，那么window.history的length值并不會改變，當你再執(zhí)行window.history.go()的時候就不會有響應了?。ǖ窃诒疚膱鼍跋氯绻脩舴祷亓松弦豁摼筒粫羞@個按鈕了，此問題也就不存在）
筆者還想到了document.referrer，它是用于獲取+改變“從哪里跳轉(zhuǎn)過來的”路徑的API，但是很不幸，我發(fā)現(xiàn)了一個很神奇的事情：document.referrer=""時，相當于“本頁面” —— 也就是說，它會把上一個頁面也變?yōu)楫斍绊撁妫?br /> 這確實是很神奇的：因為go函數(shù)也實現(xiàn)了這個功能——相當于刷新當前頁。

或者“返回網(wǎng)站首頁”？

location.href="xxx" rel="external nofollow" 

這樣還能再宣傳一波，何樂而不為？

到此這篇關(guān)于探索瀏覽器頁面關(guān)閉window.close()的使用詳解的文章就介紹到這了,更多相關(guān)瀏覽器頁面關(guān)閉window.close()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論