在VUE工程中，防止弹窗被浏览器拦截

搜索了些资料，总结验证了一下比较简单的写法；

浏览器拦截弹窗的原因：浏览器弹窗被广告滥用
浏览器拦截弹窗的条件：用户的点击时机与window.open触发的时间差，超过了一定的时间差，浏览器会认为是不安全的跳转，进行拦截

一般的用户直接点击行为是不会被拦截的

如：有既成的跳转URL

<span @click="jumpToSomewhere">click me</span>

jumpToSomewhere(){
	window.open('www.baidu.com')
}

会被拦截的情况

1.在父组件中调子组件中的window.open方法

父组件

<span @click="getChildFunction"></span>
<childComponent  ref="child"></childComponent>

getChildFunction(){
	this.$refs.child.openWebsite()
}

子组件 childComponent

<span @click="openWebsite"></span>

openWebsite(){
	window.open('www.baidu.com')
}

2.异步获取跳转链接

<span @click="jump"></span>

async jump(){
 const ajaxUrl='getJumpUrl'
 const res=await this.util.get(ajaxUrl)
 window.open(res.jumpUrl)
}

解决办法:

1的解决方法还没有试过，只能在父组件直接再写一个window.open；(以后找到再来补充)
2的解决办法，如下

<span @click="jump"></span>

async jump(){
let tempWindow=window.open // 先开一个临时的空窗口，因为在点击事件内直接新开窗口，因此不会被浏览器拦截
 const ajaxUrl='getJumpUrl'
 const res=await this.util.get(ajaxUrl)
 tempWindow.location.href=res.url // 在异步取得跳转的url之后给临时窗口的链接赋值
 //window.open(res.jumpUrl)
 if(!res.successful) tempWindow.close() // 当判断接口失败不需要开新窗口时，关闭之前的窗口
}