基于vue,解决打开新窗口被浏览器拦截的问题

编程知识 更新时间:2023-04-22 11:15:15

首先,我们先来说一下在什么情况下,新窗口会被阻截,以及阻截的原因。
当使用 window.open(url,"_blank")打开新窗口时,如果url是通过ajax从后台获取
到的时候,浏览器就会出现拦截的问题。
因为,当浏览器检测到非用户操作产生的新弹出窗口,则会对其进行阻止。因为浏览器认为这可能是一个广告,不是一个用户希望看到的页面。

那么,我们就要考虑,如何才能将ajax请求的url,不被浏览器拦截呢?
我之前也看过很多方法是说,先在发送ajax之前,打开一个空白页,然后,再将ajax获
取到的url赋给新打开的空白窗口,确实,这样解决了上面说的问题,但是我认为,这样的体验并不好,因为如果,在网速比较慢的情况下,ajax请求的时间过长,url长时间不能赋值,新窗口就会出现空白时间过长的问题。这样用户就可能将空白页手动关掉,从而就会出现一系列的问题。

那么,还有什么方法可以解决呢? 好了,重点来了(此处方法是基于vue的,其他框架或源生,思路是一样的,可以自行研究)
上边我们说了,通过ajax获取到的url,会被浏览器判定为不安全链接,被拦截,那么我们还有没有其他办法呢?当然!前几天,我在一个项目中看到过一个这样的需求,点击按钮,发送ajax,请求一个远程连接的url,将获取到的url放在一个弹框中显示,然后,再点击这个url连接,跳转至这个url页面。这时,我发现,并没有被浏览器拦截,因为这个url,不是直接从ajax获取到的,而是,先通过ajax获取一个url赋值给一个参数,然后点击链接时,将那个参数赋值给window.open(url,"_blank")中的url。
然后,我便想到了,如果我也将ajax获取到的url赋值给一个固定的参数,然后,我们在watch方法中(vue监听的方法)监听这个参数,当这个参数发生变化时直接跳转就可以了。

data() {
   	return {
        newWin:''
    }
},
watch:{
	newWin(){
	   	window.open(this.newWin,"_blank")
	}
},
methods:{
	// 点击发送ajax获取url的事件
	async getUrl(){
		const { data:res } = await this.getRequest('XXXXXXXXXX',{
            XXX:XXXXX
        })
        this.newWin = res.data.url
	}
}

更多推荐

基于vue,解决打开新窗口被浏览器拦截的问题

本文发布于:2023-04-17 03:04:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/cd1cdc19d085f640662a5d7fbcd81f02.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:新窗口   浏览器   vue

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 82325文章数
  • 6780阅读数
  • 0评论数