之前做支付中心和頁游項目的時候,經常碰到一個這樣的需求,比如點擊一個a標簽,產生了一個ajax請求,返回一個url給我,我拿着這個url打開新頁面。需求是這樣的,看起來按部就班很容易搞定,但是,發現好多瀏覽器下根本不能新打開窗口(標簽)(至少在第一次打開的時候會這樣,瀏覽器屏蔽了,然后說 剛屏蔽了一個打開窗口),因為被瀏覽器攔截了。百思不得其解,最后只好和產品說明白技術無法實現,改需求:第一次請求后,頁面彈出一個溫馨提示BOX,用戶點擊這個BOX上的按鈕,我打開上回返回給我的URL。(如果有大神知道此解決方案,歡迎討論,多多感謝)。
后面做頁游的時候,看到一同事,寫到這樣的一段代碼,說可以屏蔽瀏覽器攔截:
1 /** 2 * 模擬window.open,防止window.open被瀏覽器攔截。無法解決異步情況(所有瀏覽器)下的攔截 3 * 使用實例: 4 * $.windowopen('http://niu.xunlei.com/', '_blank'); 5 */ 6 (function($){ 7 $.extend({"windowopen": function(url, target){ 8 var a = document.createElement("a"); 9 a.setAttribute("href", url); 10 if(target == null){ 11 target = ''; 12 } 13 a.setAttribute("target", target); 14 //a.setAttribute("id", "windowopen_" + (new Date()).getTime() + Math.ceil((Math.random()*100000))); 15 document.body.appendChild(a); 16 if(a.click){ 17 a.click(); 18 }else{ 19 try{ 20 var evt = document.createEvent('Event'); 21 evt.initEvent('click', true, true); 22 a.dispatchEvent(evt); 23 }catch(e){ 24 window.open(url); 25 } 26 } 27 document.body.removeChild(a); 28 }}); 29 })(jQuery);
仔細分析了同事的代碼后,我覺得存在幾個問題:
1.應該首先嘗試window.open打開方式,而不是把這個放到最后。(如果沒有成功打開,window.open會有返回值,根據此值可以判斷)
2.DOM方式創建一個a標簽,然后去aDom.click()方式證明和window.open()一樣的效果,放在這里屬於多余。
3.自定義事件。通過度娘把我帶到了https://developer.mozilla.org/en-US/docs/DOM/document.createEvent#Notes,完整使用例子可以見這個https://developer.mozilla.org/en-US/docs/DOM/Creating_and_triggering_events。自定義事件是指,在DOM2 級下,定義各種自定義事件,和瀏覽器本身所支持的事件沒有關系,上面代碼片段中定義了一個自定義事件,但是當出發自定義事件的click時候,和瀏覽器本身支持的click有區別(瀏覽器本身支持的click,一旦出發,是要跳轉的),所以這種方式還是不行。
難道就沒有一種好點的,解決瀏覽器異步請求里 打開窗口的問題么?
求各位大神拍磚