window.open()新开浏览器窗口被拦截处理
生活随笔
收集整理的這篇文章主要介紹了
window.open()新开浏览器窗口被拦截处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
打開新窗口方式:
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()新开浏览器窗口被拦截处理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: String,StringBuffer,
- 下一篇: 智能个性化推荐_个性化推荐算法_新闻推荐