ajax請求響應中用window.open開啟新視窗會被瀏覽器攔截的解決方式

標籤：

一、問題描述

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  = xxxx            tmpWin.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開啟新視窗會被瀏覽器攔截的解決方式