打开新窗口方式:
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 />) } }复制代码