前端開發(fā)中經(jīng)常要用到 window.open 彈出一個新窗口來進行交互，但是在使用過程中卻會碰到各種各樣的問題，下面是我在平時開發(fā)過程中碰到的一些問題。

對于winodw.open的使用可以先看下這個文章 ?http://www.w3help.org/zh-cn/causes/BX1053

一.瀏覽器攔截

由于各種彈出廣告的濫用，現(xiàn)在各個瀏覽器對window.open的使用都進行了嚴格的限制，還有各種的彈出窗口攔截器，稍不留神就會導致window.open方法被攔截。

下面這種腳本自動觸發(fā)的彈窗行為將會被瀏覽器攔截掉。

<script type="text/javascript">
//將會被攔截
window.open(url);
</script>

那么我們該如何正確的彈出窗口呢，其實只要把彈出窗口的函數(shù)綁定到鼠標的onclick事件上瀏覽器就會認為這是一個合理的open，不會進行攔截。

<script type="text/javascript">
openNewWindow =function() {
window.open(url);
}
</script>

<button onclick="openNewWindow()">彈出窗口</button>

?

或者你可以將彈出窗口函數(shù)綁定到document.body上，只要用戶在頁面上進行點擊就會彈出窗口。

這樣可以保證正常的彈出新窗口，但是如果在點擊事件中要先發(fā)送一個AJAX請求，根據(jù)請求結果再彈出窗口的行為在有的瀏覽器下仍會被攔截，如Chrome，FF

<script type="text/javascript">
openNewWindow =function() {
$.ajax({ //發(fā)送一個ajax請求
url:ajax請求的url，
success: function() {
//在請求返回中彈窗,有的瀏覽器下會被攔截
window.open(url);
}
});
}
</script>

解決思路有下面兩種：

1.openNewWindow中先彈出一個空白窗口，待AJAX請求返回再修改彈出window的url。

2.不用ajax直接OPEN要請求的URL，然后由服務器來判斷重定向到要open的URL。

這兩種方法都會導致窗口出現(xiàn)較長時間的白頁，而且如果最后請求結果是不需要彈窗的時候就需要關閉該窗口，就會是一個白頁閃了一下，用戶體驗很不好。所以應該盡量避免在ajax請求返回中彈窗。

二. IE6下回傳值問題

看下面的例子，例子中彈出的窗口頁面會調用父頁面的callBackFun方法，然后將自己關閉。

newWindow.html

<script type="text/javascript">
onload =function(){
window.opener.callBackFun({ 'msg' : 'hahhaha'});
self.close(); //方法調用后關閉自身窗口
}
</script>

主頁面:

<script type="text/javascript">
$showlog =function( msg ){
var el = document.getElementById( 'log' );
el.innerHTML = el.innerHTML +'<br/>'+ msg;
}
openNewWindow =function() {
window.open("./newWindow.html");
}
callBackFun =function( obj ){
//正常打印
$showlog(obj.msg);
//延時保證在窗口關閉之后執(zhí)行
setTimeout(function(){
//當打開的窗口被關閉之后訪問obj.msg,IE6下會直接報錯
$showlog(obj.msg);
},1000);
}
</script>

<button onclick="openNewWindow()">彈出窗口</button>
<div id="log"></div>

當接收到的參數(shù)為引用類型時，如果彈出窗口被關閉，IE6下主頁面接收到的數(shù)據(jù)也會被回收掉。此時判斷obj是存在的，但是嘗試訪問obj.msg時就會出錯，沒任何提示。所以如果有這種使用場景應先對obj進行深度復制。

?

三.頁面不能解gzip的問題

IE6下window.open打開的頁面如果同時進行了cache和gzip壓縮，會導致頁面偶發(fā)的出現(xiàn)白頁不解析的情況。這時其實頁面已經(jīng)正常獲取到了，只是由于未解開gzip壓縮導致的。解決方法就是調整輸出的頭信息（cache和gzip）。

header('Cache-Control: post-check=0, pre-check=0');
header('Pragma: ');

這是IE6的一個BUG，不只出現(xiàn)在window.open的時候，只是我在這種情況下遇到了而已。可以參考下面的文章

http://blog.sina.com.cn/s/blog_4dd475390100qci5.html

四.如何判斷彈出窗口已關閉

window.open會返回一個彈出窗口的句柄，該句柄有一個 closed 屬性，當窗口被關閉時值為true,否則為false。但是在IE下會有個BUG，窗口被關閉之后 closed屬性并沒有立即被設置為true。所以應不斷的檢測closed屬性直到為true才可以確認窗口已關閉。雖然為false時也可能已經(jīng)被關閉了。下面頁面是IE下的錯誤表述

http://support.microsoft.com/kb/241109

?

五.IE7下設置所有頁面都在新標簽頁中打開導致的返回值問題

大多數(shù)時候我們通過下面的代碼來判斷彈出窗口是否成功，如果成功會返回彈出窗口的引用，失敗會返回null。

var _win=window.open(url);
if(!_win){
//彈出失敗,重定向當前頁面到url
}else{
//彈出成功
}

但是如果在IE7下開啟了所有頁面都在新標簽頁中打開，window.open就算執(zhí)行成功也不會返回新窗口引用。至于有什么影響你懂的。

?

?

?

?

?

轉載于:https://www.cnblogs.com/feng_013/archive/2011/09/27/2175009.html

總結

以上是生活随笔為你收集整理的window.open使用中遇到的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。