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 />      
        )    
    }  
}复制代码