Ajax請(qǐng)求響應(yīng)中用window.open打開(kāi)新窗口被攔截的解決方法

一、問(wèn)題描述

ajax 異步請(qǐng)求成功后需要新開(kāi)窗口打開(kāi) url，使用的是 window.open() 方法，但是會(huì)被瀏覽器給攔截了，需要用戶(hù)點(diǎn)下。

二、問(wèn)題分析

　　瀏覽器之所以攔截新開(kāi)窗口是因?yàn)樵摬僮鞑⒉皇怯脩?hù)主動(dòng)觸發(fā)的，所以它認(rèn)為這是不安全的就攔截了，即使 ajax 回調(diào)函數(shù)中模擬執(zhí)行 click 或者 submit 等用戶(hù)行為（trigger('click')），瀏覽器也會(huì)認(rèn)為不是由用戶(hù)主動(dòng)觸發(fā)的，因此不能被安全執(zhí)行，所以被攔截。

說(shuō)明：

1、如果是在 a href="javascript:void(0)" onclick="fun()">/a> 這個(gè)中指定的 fun方法中調(diào)用 window.open()則不會(huì)被攔截，因?yàn)闉g覽器會(huì)認(rèn)為是主動(dòng)的。 但是在ajax請(qǐng)求的響應(yīng)中打開(kāi)窗口是會(huì)被攔截的。

2、如果不是打開(kāi)新窗口，而是改原來(lái)的網(wǎng)頁(yè)地址，可以使用window.location = newurl 來(lái)實(shí)現(xiàn)，這樣不會(huì)被攔截。

三、解決方案

在ajax請(qǐng)求之前，先用window.open 打開(kāi)一個(gè)空白窗口，然后在ajax的響應(yīng)函數(shù)中設(shè)置該窗口的location屬性為新的url。

代碼示例如：

function fun(){
var tmpWin =window.open()
ajax(xxx, handle(){ 
//回調(diào)函數(shù)。這是偽代碼，語(yǔ)法不準(zhǔn)。
var newurl = xxxx
tmpWin.location = newurl;
})
}

上面方法，存在一個(gè)問(wèn)題時(shí)，因?yàn)橄却蜷_(kāi)了空白窗口，如果ajax請(qǐng)求失?。ňW(wǎng)絡(luò)或業(yè)務(wù)邏輯問(wèn)題）后， 新窗口中就不會(huì)有正常的結(jié)果體現(xiàn)，有可能造成用戶(hù)疑惑。
一個(gè)解決辦法是，當(dāng)ajax出現(xiàn)問(wèn)題時(shí)，可以考慮給出一個(gè)提示，如 tmpWin.document.write("服務(wù)器處理異常");

甚至為了防止ajax響應(yīng)時(shí)間過(guò)長(zhǎng)，當(dāng)窗口新建后，立即給出提示 tmpWin.document.write("服務(wù)器正在處理中，請(qǐng)稍后");

后面如果ajax正常返回，則因?yàn)樵O(shè)置了location值，原來(lái)打印的信息會(huì)被新的頁(yè)面信息覆蓋。

這里還有一種方法，但也有缺陷：

因?yàn)閍jax可以設(shè)置為同步請(qǐng)求，這樣可以在ajax請(qǐng)求之后，利用window.open打開(kāi)新窗口。如：

function fun(){
var result;
ajax({ //需要設(shè)置同步請(qǐng)求
.....
result = xxx 
.......
}) 
if(result){
window.open(xxxx)
}
}

上面的做法，因?yàn)槭菍?duì)ajax請(qǐng)求的結(jié)果判斷后，才打開(kāi)新窗口，避免了上面說(shuō)的問(wèn)題。
但是因?yàn)槭峭秸?qǐng)求，在我們測(cè)試中發(fā)現(xiàn)一個(gè)問(wèn)題，如果服務(wù)器響應(yīng)時(shí)間過(guò)長(zhǎng)，一是界面會(huì)停頓（用戶(hù)體驗(yàn)不好），二是新窗口會(huì)被攔截。

只有在服務(wù)器很快返回時(shí)才沒(méi)有問(wèn)題。 我們測(cè)試時(shí)，在服務(wù)器代碼處理中sleep了1秒，發(fā)現(xiàn)新窗口就被攔截了。

四、小結(jié)

總結(jié)下，可以看出，對(duì)于在ajax返回后打開(kāi)新窗口，沒(méi)有特別完美的方法。具體還是要根據(jù)自己系統(tǒng)的業(yè)務(wù)特點(diǎn)來(lái)采取相應(yīng)的做法。

以上所述是小編給大家介紹的Ajax請(qǐng)求響應(yīng)中用window.open打開(kāi)新窗口被攔截的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！