window.open雖然在很多時候被廣大中小站長用於彈窗廣告的展示,所以廣受爭議,但是在業務需求中還是有很多場景需要用到此功能。然而,大多數瀏覽器對此都有一定的安全策略進行阻止,為此本文將針對以下瀏覽器進行測試。
Chrome16、Firefox10、360SE4.2、IE6、IE8
1、首先是最原始的在head標簽中加入
<script>
window.open('about:blank'); //空白頁
window.open('http://www.1688.com/'); //非同源知名站點
window.open('http://www.ginano.net/'); //同源
window.open('http://www.aliren.org/'); //非同源非知名站點
alert('over!');
</script>
結果顯示:Firefox、IE6、Chrome、360SE均阻止了彈出廣告;360SE在加載時,從第一個open開始阻止了彈窗並且停止了后續代碼的執行,連over都沒有彈出(這樣也行)。
2、在一個非a標簽上執行click事件,然后觸發行為
$('#not-a').click(function(){
window.open('http://www.1688.com/');
window.open('http://www.aliren.org/');
window.open('http://www.ginano.net/');
window.open('about:blank');
alert('over!');
});
<span id="not-a">dddd</span>
結果顯示:除了IE和360SE不允許同時打開兩個及以上彈窗外,其他瀏覽器都能夠正常打開所有窗口,但是360SE居然同樣阻止彈窗的同時停止后后續的腳本執行!!
3、在一個a標簽上執行2中同樣的操作,得出的結論一致,在此不再累述。同樣從上面的測試中可見,對於打開多個窗口和打開單個窗口基本行為一致,只是在有些時候360SE這個號稱安全的瀏覽器做了一些額外的處理而已,所以接下來的測試將會只針對一個彈窗進行測試。如果不同網址對應的彈窗行為不同將會做進一步說明。
4、很多時候我們會根據ajax請求返回的結果來執行window.open操作,那么這個時候還能順利打開么?
$('#tag-a,#not-a').click(function(e){
e.preventDefault();
$.ajax({
//async:false,
url:'http://www.ginano.net/',
success:function(){
window.open('http://www.ginano.net/');
}
});
//return true;
});
<a href="http://www.ddddd.com" id="tag-a">testa</a>
<span id="not-a">testb</span>
結果很意外的,360SE居然都能夠打開彈窗,而其他所有瀏覽器都一致的阻止了彈窗。
5、重復第4種情況的討論,修改ajax請求為同步請求,看看什么反應。結果顯示所有瀏覽器都能夠正常打開彈窗,因此得出結論:同步的操作能夠解除瀏覽器對彈窗的限制。
6、其實還有一種非常惡心的場景,當然可以采用其他方式避免。但是如果你又不得不這樣做呢?還是得看一下吧:
如果想希望通過點擊B的同時,使得某個鏈接A也被點擊(好像大多數的廣告需要被點擊,許多垃圾站就這樣做的),就需要用到此場景
$('#not-a').click(function(){
$('#tag-a').click();
});
<a href="http://www.ddddd.com" id="tag-a">test</a>
<span id="not-a">dddd</span>
而這種情況,所有瀏覽器都會對js觸發的和鼠標觸發的點擊事件做出正確的判斷,因此不會自動打開鏈接,從而影響垃圾站長們的心情。但是不急,從上面幾個場景的分析可以很容易得到以下的解決方法,那就是給所需要的鏈接增加一個click的事件,然后通過click事件注冊window.open來打開所需要的窗口:
$('#tag-a').click(function(){
e.preventDefault();
window.open($(this).attr('href'));
return false;
});
因此就可以實現變態的需求了。。。站長們偷着樂吧!(其實這種方法和直接在觸發標簽中添加window.open事件別無兩樣)
從上面的分析可見,瀏覽器對於鼠標點擊和js觸發點擊是有不同的行為控制的,主要是需要判斷標准為事件的觸發起始必須為真實的鼠標事件,以及事件執行的連貫性。另外同時打開多個彈窗也會受到部分瀏覽器的安全屏蔽。所以,一開始就自動打開彈窗將會被阻止,而通過鼠標click事件來彈窗卻可以正常打開;而ajax的異步操作同樣會讓瀏覽器認為其為非連貫性的鼠標點擊事件,所以需要采用同步的請求來完成。
