window.open被拦截的问题以及解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Juniorselk/article/details/78331954

因为window.open在一段异步代码或者ajax请求中执行的时候，浏览器默认是弹窗广告，所以会进行拦截。关于这个问题我有几个思路，下面和大家分享一下。

1，window.location.href = '支付链接'不会被拦截，但是会在原页面进行跳转，所以不推荐；

2，第二种就是网上比较常见的一种解决方案，就是新打开一个窗口然后再修改链接。

下面是代码：

<a href="javascript:void(0)" onClick={this.Reg}>
  <div className={styles.bottom}>
    <i className="iconfont">&#xe623;</i> 确认充值
  </div>
</a>

        Reg = () => {

                 //获取支付链接的业务逻辑，注意，window.open('about:blank')要在请求发送之前进行.

	let Link = window.open('about:blank');

	Link .location = '支付链接'

}

这里需要注意的是，部分移动端浏览器使用window.open()不会打开新的窗口，会默认在原页面进行跳转，这样后面的逻辑就无法执行，所以需要通过浏览器内核判断，使在该类浏览器下，不使用window.open()打开新页面，改为使用window.location.href = '链接'，目前我所遇到的有QQ浏览器、百度APP，欢迎补充

3，window.open()只有在异步操作或者ajax请求中执行时才会被浏览器拦截，所以我们将ajax请求异步改为同步即可；但是可惜的是fetch、axios暂时没有这些设置，我通过promise包装也没有用，如果有更好的办法，欢迎补充