100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > window.open()新开浏览器窗口被拦截处理

window.open()新开浏览器窗口被拦截处理

时间:2022-05-24 07:12:15

相关推荐

window.open()新开浏览器窗口被拦截处理

打开新窗口方式:

1.页面标签跳转

<a href="#" target="_blank">新页面</a>复制代码

2.js跳转

window.open('#')复制代码

遇到的问题:

window.open( )在正常的点击事件中可以正常使用,但是在接口请求完成后调用会被浏览器默认拦截。

// 正常跳转function newWindow(){ window.open('')}复制代码

// 被拦截示例fetch(url,option).then(res=>{ window.open('')})复制代码

尝试方法:

先打开一个空的窗口,然后再给新窗口赋值跳转链接。

//尝试的方法,被拦截fetch(url,option).then(res=>{ let newWindow = window.open(' ', '_blank') newWindow.location.href='/?name=' + res.name})复制代码

仍然会被拦截,并且浏览器报错winHandler为undefined。

解决方法:

把newWindow定义在接口请求的外部,保证新开空白窗口不会被拦截。

//正常跳转,不会被拦截let newWindow = window.open(' ', '_blank')fetch(url,option).then(res=>{ newWindow.location.href='/?name=' + res.name})复制代码

最终优化:

新打开一个空白窗口,等到之前页面接口返回结果时新页面才会打开对应链接,这中间会有不定时间的空白期,体验不好。可以给新开的空白页面赋值一个携带loading标识的链接,让新页面处于加载中状态。待接口返回数据后再重新更改链接。

//正常跳转,不会被拦截,添加loading标识let newWindow = window.open('/#loading ', '_blank')fetch(url,option).then(res=>{ newWindow.location.href='/?name=' + res.name})复制代码

//新页面通过hash接收loading标识render () { if (window.location.hash === '#loading') {return <Spin tip='Loading...' style={{margin: '100px auto', display: 'block'}} /> } else {return ( <Index />) } }复制代码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。