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

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

一.瀏覽器攔截

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

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

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

那么我們?cè)撊绾握_的彈出窗口呢，其實(shí)只要把彈出窗口的函數(shù)綁定到鼠標(biāo)的onclick事件上瀏覽器就會(huì)認(rèn)為這是一個(gè)合理的open，不會(huì)進(jìn)行攔截。

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

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

?

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

這樣可以保證正常的彈出新窗口，但是如果在點(diǎn)擊事件中要先發(fā)送一個(gè)AJAX請(qǐng)求，根據(jù)請(qǐng)求結(jié)果再?gòu)棾龃翱诘男袨樵谟械臑g覽器下仍會(huì)被攔截，如Chrome，FF

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

解決思路有下面兩種：

1.openNewWindow中先彈出一個(gè)空白窗口，待AJAX請(qǐng)求返回再修改彈出window的url。

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

這兩種方法都會(huì)導(dǎo)致窗口出現(xiàn)較長(zhǎng)時(shí)間的白頁(yè)，而且如果最后請(qǐng)求結(jié)果是不需要彈窗的時(shí)候就需要關(guān)閉該窗口，就會(huì)是一個(gè)白頁(yè)閃了一下，用戶體驗(yàn)很不好。所以應(yīng)該盡量避免在ajax請(qǐng)求返回中彈窗。

二. IE6下回傳值問題

看下面的例子，例子中彈出的窗口頁(yè)面會(huì)調(diào)用父頁(yè)面的callBackFun方法，然后將自己關(guān)閉。

newWindow.html

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

主頁(yè)面:

<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);
//延時(shí)保證在窗口關(guān)閉之后執(zhí)行
setTimeout(function(){
//當(dāng)打開的窗口被關(guān)閉之后訪問obj.msg,IE6下會(huì)直接報(bào)錯(cuò)
$showlog(obj.msg);
},1000);
}
</script>

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

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

?

三.頁(yè)面不能解gzip的問題

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

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

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

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

四.如何判斷彈出窗口已關(guān)閉

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

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

?

五.IE7下設(shè)置所有頁(yè)面都在新標(biāo)簽頁(yè)中打開導(dǎo)致的返回值問題

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

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

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

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/feng_013/archive/2011/09/27/2175009.html

總結(jié)

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

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