window.open() 被攔截後的分析

前言：
此文章僅是我的工做中遇到問題後的一些記錄和總結，可能毫無心義。。

事件回顧：

在開發中，PM要求在一個頁面中輸入多個連接而後能夠一鍵在新窗口打開，因此就想到用window.open來實現，可是測試的時候發現會被攔截

 

分析：

關於window.open的用戶不少前輩都有寫過相關文章，就不在這裏介紹了，查看window.open用法

針對不一樣的瀏覽器作了如下測試

1.用戶點擊事件內，觸發打開一個新窗口

用戶點擊事件觸發新窗口是例如：

obj.onclick=function(){

window.open(url);

}

經過用戶事件觸發的新窗口打開，這種形式打開新窗口瀏覽器會認爲是用戶本身須要的，大多瀏覽器是不會攔截的

目前測試的幾個用戶事件，只有click和dbclick是瀏覽器不會攔截的

窗口攔截不僅是跟瀏覽器內核有關，因此對原生IE和幾個常見IE內核的瀏覽器都有作測試

事件：click，dbclick

不攔截的瀏覽器有：Chrome，FF，IE 6.0-10.0，Safari，Opera，360瀏覽器

攔截：搜狗瀏覽器

事件：mouseover，mousemove，mouseout，scroll等等

不攔截：無

攔截：Chrome，FF，IE 6.0-10.0，Safari，Opera，360瀏覽器

2.用戶點擊事件內，觸發打開多個新窗口

點擊一次成功打開多個窗口的瀏覽器：FF，360瀏覽器，Safari

點擊一次打開第一個窗口，後面的窗口攔截的瀏覽器：Chrome，IE 6.0-10.0，Opera

3.Javascript自動觸發打開窗口

如：

setTimeout(function(){ window.open('http://www.baidu.com')},1000)

或者ajax請求成功後執行

$obj.click(function(){

$.ajax({

sucss:function(data){

if(data){

 window.open('http://www.baidu.com')

}

}

})

})

攔截的瀏覽器：測試的幾個瀏覽器都攔截

解決方案：

1.對於ajax返回後在打開新窗口，能夠在用戶點擊後就打開一個空白窗口，而後再返回成功後給空白窗口一個url，這樣就不會被攔截了

$obj.click(function(){

var newTab=window.open('about:blank');

$.ajax({

sucss:function(data){

if(data){

 //window.open('http://www.baidu.com');

newTab.location.href="http://www.baidu.com";

}

}

})

})

2.腳本自行觸發打開的新窗口

看網上不少說新建a標籤，模擬點擊，經測試，無效，請大牛指導

 

 

 

 

 

 

 

 

 

 

 

 

 

問題：

前面開發項目時碰到一個問題，ajax 異步請求成功後須要新開窗口打開 url，使用的是 window.open() 方法，可是很惋惜被瀏覽器給攔截了，怎麼解決這個問題呢？
分析：

瀏覽器之因此攔截新開窗口是由於該操做並非用戶主動觸發的，因此它認爲這是不安全的就攔截了（不過若是是 _self 的話就不會有這個限制），即便 ajax 回調函數中模擬執行 click 或者 submit 等用戶行爲（trigger('click')），瀏覽器也會認爲不是由用戶主動觸發的，所以不能被安全執行，因此被攔截。
解決方法：

一、異步改成同步，即：async:false

二、將新開窗口指向爲一個對象，而後修改對象的 url，好比：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$( '.task' ).bind( 'click' , function (){ var w = window.open(); $.ajax({ type: 'POST' , url: '/surveyTask' , dataType: 'json' , error: function (){ w.close(); }, success: function (res){ w.location = res.url; } }); });

最後須要說明的是：網上的動態添加 form 新開窗口的方法，並不適合 ajax 請求，至少博主測試了下仍然被瀏覽器所攔截。