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()新开浏览器窗口被拦截处理的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。