打開新窗口方式：

1.頁面標簽跳轉

<a href="#" target="_blank">新頁面</a>復制代碼2.js跳轉

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

遇到的問題：

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

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

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

嘗試方法：

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

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

解決方法：

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

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

最終優化：

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

//正常跳轉，不會被攔截，添加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 })復制代碼

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。