一、問題描述
ajax 非同步請求成功後需要新開視窗開啟 url,使用的是 window.open() 方法,但是會被瀏覽器給攔截了,需要使用者點下。
二、問題分析
瀏覽器之所以攔截新開視窗是因為該操作並不是使用者主動觸發的,所以它認為這是不安全的就攔截了,即使 ajax 回呼函數中類比執行 click 或者 submit 等使用者行為(trigger('click')),瀏覽器也會認為不是由使用者主動觸發的,因此不能被安全執行,所以被攔截。
說明:
1、如果是在 <a href="javascript:void(0)" onclick="fun()"></a> 這個中指定的 fun方法中調用 window.open()則不會被攔截,因為瀏覽器會認為是主動的。 但是在ajax請求的響應中開啟視窗是會被攔截的。
2、如果不是開啟新視窗,而是改原來的網頁地址,可以使用window.location = newurl 來實現,這樣不會被攔截。
三、解決方案
在ajax請求之前,先用window.open 開啟一個空白視窗,然後在ajax的響應函數中設定該視窗的location屬性為新的url。
程式碼範例如:
function fun(){var tmpWin =window.open()ajax(xxx, handle(){ //回呼函數。這是虛擬碼,文法不準。var newurl = xxxxtmpWin.location = newurl;})}
上面方法,存在一個問題時,因為先開啟了空白視窗,如果ajax請求失敗(網路或商務邏輯問題)後, 新視窗中就不會有正常的結果體現,有可能造成使用者疑惑。
一個解決辦法是,當ajax出現問題時,可以考慮給出一個提示,如 tmpWin.document.write("伺服器處理異常");
甚至為了防止ajax回應時間過長,當視窗建立後,立即給出提示 tmpWin.document.write("伺服器正在處理中,請稍後");
後面如果ajax正常返回,則因為設定了location值,原來列印的資訊會被新的頁面資訊覆蓋。
這裡還有一種方法,但也有缺陷:
因為ajax可以設定為同步請求,這樣可以在ajax請求之後,利用window.open開啟新視窗。如:
function fun(){var result;ajax({ //需要設定同步請求.....result = xxx .......}) if(result){window.open(xxxx)}}
上面的做法,因為是對ajax請求的結果判斷後,才開啟新視窗,避免了上面說的問題。
但是因為是同步請求,在我們測試中發現一個問題,如果伺服器回應時間過長,一是介面會停頓(使用者體驗不好),二是新視窗會被攔截。
只有在伺服器很快返回時才沒有問題。 我們測試時,在伺服器代碼處理中sleep了1秒,發現新視窗就被攔截了。
四、小結
總結下,可以看出,對於在ajax返回後開啟新視窗,沒有特別完美的方法。具體還是要根據自己系統的業務特點來採取相應的做法。
以上所述是小編給大家介紹的Ajax請求響應中用window.open開啟新視窗被攔截的解決方案,希望對大家有所協助,如果大家有任何疑問請給我留言,小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援!