打開新窗口方式：

1.頁面標簽跳轉(zhuǎn)

<a href="#" target="_blank">新頁面</a>復(fù)制代碼2.js跳轉(zhuǎn)

window.open('#')復(fù)制代碼

遇到的問題：

window.open( )在正常的點擊事件中可以正常使用，但是在接口請求完成后調(diào)用會被瀏覽器默認攔截。

// 正常跳轉(zhuǎn) function newWindow(){ window.open('http://www.test.com') }復(fù)制代碼

// 被攔截示例 fetch(url,option).then(res=>{ window.open('http://www.test.com') })復(fù)制代碼

嘗試方法：

先打開一個空的窗口，然后再給新窗口賦值跳轉(zhuǎn)鏈接。

//嘗試的方法，被攔截 fetch(url,option).then(res=>{ let newWindow = window.open(' ', '_blank') newWindow.location.href='http://www.test.com/?name=' + res.name })復(fù)制代碼仍然會被攔截，并且瀏覽器報錯winHandler為undefined。

解決方法：

把newWindow定義在接口請求的外部，保證新開空白窗口不會被攔截。

//正常跳轉(zhuǎn)，不會被攔截 let newWindow = window.open(' ', '_blank') fetch(url,option).then(res=>{ newWindow.location.href='http://www.test.com/?name=' + res.name })復(fù)制代碼

最終優(yōu)化：

新打開一個空白窗口，等到之前頁面接口返回結(jié)果時新頁面才會打開對應(yīng)鏈接，這中間會有不定時間的空白期，體驗不好。可以給新開的空白頁面賦值一個攜帶loading標識的鏈接，讓新頁面處于加載中狀態(tài)。待接口返回數(shù)據(jù)后再重新更改鏈接。

//正常跳轉(zhuǎn)，不會被攔截，添加loading標識 let newWindow = window.open('http://www.test.com/#loading ', '_blank')fetch(url,option).then(res=>{ newWindow.location.href='http://www.test.com/?name=' + res.name })復(fù)制代碼

//新頁面通過hash接收loading標識 render () { if (window.location.hash === '#loading') { return <Spin tip='Loading...' style={{margin: '100px auto', display: 'block'}} /> } else { return ( <Index /> ) } }復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的window.open()新开浏览器窗口被拦截处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。