第解決window.open()被瀏覽器攔截的問題一、問題描述

最近在做項(xiàng)目的時(shí)候碰到了使用window.open被瀏覽器攔截的情況，雖然在自己的環(huán)境可以對頁面進(jìn)行放行，但是對用戶來說，不能要求用戶都來通過攔截。何況當(dāng)出現(xiàn)攔截時(shí)，很多用戶根本不知道發(fā)生了啥，不知道在哪里看被攔截的頁面。因此必須通過代碼來解決這個(gè)問題！

以下是瀏覽器攔截示例：

二、問題分析

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

三、window.open()語法

window.open(url,name,features,replace)

Arguments-參數(shù)url

可選字符串參數(shù)，指向要在新窗口中顯示的文檔的URL。如果省略該參數(shù)，或者參數(shù)為空字符串，新窗口不會(huì)顯示文檔。

name

可選字符串參數(shù)，該參數(shù)可以設(shè)置新窗口的名稱。

相同name的窗口只能創(chuàng)建一個(gè)，要想創(chuàng)建多個(gè)窗口則name不能相同。

features

可選字符串參數(shù)，該參數(shù)用于設(shè)定新窗口的功能。因?yàn)樵搮?shù)是可選的，如果沒有指定該參數(shù)，新窗口有所有的標(biāo)準(zhǔn)功能。

replace

可選布爾參數(shù)，設(shè)置新窗口中的操作歷史的保存方式。

true-創(chuàng)建新歷史記錄

false-替換舊的歷史記錄

Returns-返回值

一個(gè)根據(jù)name參數(shù)對新創(chuàng)建的或已存在的窗口對象的引用。

Description-描述

open()方法可以查找一個(gè)已經(jīng)存在的或者新建的瀏覽器窗口。如果name參數(shù)指定了一個(gè)已經(jīng)存在的劉瀏覽器窗口，則返回對該窗口的引用。返回的窗口中將顯示URL中指定的文檔，但是features參數(shù)會(huì)被忽略。open()方法是JavaScript中唯一通過名稱獲得瀏覽器窗口引用的途徑。

如果沒有指定name參數(shù)，或者不存在name參數(shù)指定的名稱的窗口，open()方法將創(chuàng)建一個(gè)新的瀏覽器窗口。

name參數(shù)用于指定新窗口的名稱，該名稱必須由字母、數(shù)字和下劃線字符組成。它可以被HTML文檔中的a標(biāo)記或form標(biāo)記指向。

當(dāng)你使用window.open()方法加載一個(gè)新的文檔到一個(gè)已經(jīng)存在了命名的窗口中時(shí)，你可以通過replace參數(shù)設(shè)置歷史記錄的保存方式.。如果該參數(shù)是true,新文檔的歷史記錄將取代舊文檔的歷史記錄。如果該參數(shù)為false或這沒有指定該參數(shù)，新的文件在窗口的瀏覽歷史記錄中將建立自己的條目。該參數(shù)提供了location.replace()相同功能的方式。

不要把Window.open()和Document.open()混淆；這是兩個(gè)完全不一樣的方法。為了讓代碼更明晰，你可以用Window.open()代替open()。作為HTML屬性定義事件處理程序時(shí)，open()一般被解釋為Document.open()，所以在這種情況下，你必須使用Window.open()。

WindowFeatures-窗口特性

feature參數(shù)是一個(gè)用逗號(hào)分隔的功能列表。如果該參數(shù)為空或者沒有指定該參數(shù)，新的窗口將擁有所有的功能。另一方面,如果feature參數(shù)只指定了某一項(xiàng)或某幾項(xiàng)功能，那么其他沒有被指定的功能將不會(huì)出現(xiàn)在新的窗口中。該字符串不能包含任何空格或其它空字符串。

列表中的每個(gè)元素的格式：功能[=值]

對于絕大多數(shù)的功能來說，它們的值一般都是yes或no。對這些功能，等號(hào)和值都可以省略不寫。對于width和height特性，必須給它們指定一個(gè)以像素為單位的值。

一下是一些普遍支持的功能和它們的含義：

height

設(shè)定窗口顯示區(qū)域的像素寬度

left

瀏覽器窗口距離屏幕左邊的距離

location

指明地址欄在新窗口中是否可見

menubar

指明菜單欄在新窗口中是否可見

resizable

指明新窗口是否可以調(diào)整大小

scrollbars

指明滾動(dòng)欄在新窗口中是否可見

status

指明狀態(tài)欄在新窗口中是否可見

toolbar

指明工具欄在新窗口中是否可見

top

設(shè)定新窗口距屏幕上方的距離

width

設(shè)定窗口顯示區(qū)域的像素寬度

alwaysLowered

指定窗口隱藏在所有窗口之下

alwaysRaised

指定窗口浮在所有窗口之上

dependent

指定打開的窗口為父窗口的一個(gè)子窗口。并隨父窗口的關(guān)閉而關(guān)閉

directions

指定Navigator2和3的目錄欄是否在新窗口中可見

hotkeys

在沒有菜單欄的新窗口設(shè)置安全退出熱鍵

innerHeight

設(shè)置新窗口中文檔的像素高度

innerWidth

設(shè)置新窗口中文檔的像素寬度

menubar

指明菜單欄在新窗口中是否可見

outerHeight

設(shè)定窗口（包括裝飾邊框）的像素高度

outerWidth

設(shè)定窗口（包括裝飾邊框）的像素寬度

screenX

設(shè)定新窗口離屏幕邊界的像素長度

screenY

設(shè)定新窗口離屏幕上邊界的像素長度

titlebar

指明菜單題目欄在新窗口是否可見

z-look

在文檔中包含各個(gè)pplet標(biāo)簽的數(shù)組

fullscreen

打開的窗體是否進(jìn)行全屏顯示

四、代碼模擬

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試彈框攔截/title

script

window.open("/chenyablog/","測試彈框","top=nInt,left=nInt,width=nInt,height=nInt,location=yes,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no");

/script

/head

body

h1測試彈框攔截/h1

/body

/html

五、解決方案在

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

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試彈框攔截/title

script

asyncdisplayProjectileFrame(type){

consttitle='測試彈框攔截'

//先打開一個(gè)窗口

letnewWindow=window.open()

//給新窗口設(shè)置標(biāo)題

newWindow.document.title=title

try{

constbase='xxxxxxxxxx'

//這里是模擬ajax，不同使用場景需要有所變化

constopenUrl=awaitthis.$axios.$get('/xxx/xxxx',{

params:{

base

if(openUrl){

//重定向

newWindow.location=openUrl

}catch(e){

this.$axiosError(e)

/script

/head

body

h1測試彈框攔截/h1

/body

/html

上面方法，存在一個(gè)問題時(shí)，因?yàn)橄却蜷_了空白窗口，如果ajax請求失敗（網(wǎng)絡(luò)或業(yè)務(wù)邏輯問題）后，新窗口中就不會(huì)有正常的結(jié)果體現(xiàn)，有可能造成用戶疑惑。

一個(gè)解決辦法是，當(dāng)ajax出現(xiàn)問題時(shí)，可以考慮給出一個(gè)提示，如newWindow.document.write(服務(wù)器處理異常

甚至為了防止ajax響應(yīng)