您的位置: 首页  >  文章  >  如何解决javascript弹窗被阻止？——华为云bug解决

如何解决javascript弹窗被阻止？——华为云bug解决

分类: 文章 • 2024-04-08 21:16:46

现象

近期，客户在使用我们华为云镜像容器服务(SWR)的时候，反馈了一个问题——在镜像构建的源码托管中绑定gitHub或gitee账户的时候，会弹出弹框，但是这个弹框被chrome浏览器禁止。
如何解决javascript弹窗被阻止？——华为云bug解决
(地址：https://console.huaweicloud.com/swr/?region=cn-east-2#/app/s2i/oauth ，欢迎大家使用华为产品，如有不足，敬请微信（微信号：809742006）告知！)
这个问题，让一些用户在初次使用的时候，不知道如何解决，用户体验非常不好。

虽然这看上去是浏览器的原因，但是作为这个项目的前端开发人员，务必要通过技术手段去解决，保证用户有足够良好的体验。

问题分析

在我们SWR项目中，多处使用了这类绑定按钮，比如再创建构建任务中的绑定和上述源码托管中的绑定，这两个绑定按钮打开弹窗，前者不被阻止，后者被阻止，通过对比、文献查阅等途径，我们发现一个规律：

如果单纯使用window.opne();并不会被阻止；
如果在异步请求后的回调函数中使用，则会被阻止。
如何解决javascript弹窗被阻止？——华为云bug解决
(地址：https://console.huaweicloud.com/swr/?region=cn-east-2#/app/s2i/addTask ，欢迎大家使用华为产品，如有不足，敬请微信（微信号：809742006）告知！)

问题原因

当我们弹窗一个新窗口的时候，浏览器会认为这是非用户操作产生的新窗口，会将其认作为类似广告的弹窗，触犯了浏览器的安全保护机制，所以会将这类弹窗禁止。

解决方案

1、通过a标签点击事件解决

当我们点击按钮的时候，可以认为创建一个a标签，并调用a标签的click事件，去触发a标签的跳转。

function openURL(url, id) {
   var a = document.createElement(‘a‘);
    a.setAttribute(‘target‘, ‘_blank‘);
    a.setAttribute(‘href‘, url);
    a.setAttribute(‘id‘, id);
    // 防止反复添加
    if(!document.getElementById(id)) {                     
        document.body.appendChild(a);
    }
    a.click();
}
2、通过表单提交解决

大家知道，我们form表单里面的submit，可以将表单提交到某个指定的地址，并且可以进行跳转。此类方法比较麻烦，通常需要构造一个form表单。

3、通过中介窗口解决(推荐)

所谓的中介窗口，就是点击后先跳转到页面A，再从A重定向到目标地址。

let newWindow = window.open();
//P代表异步请求的promise
P.then((data)=>{
	newWindow.location.href = 新地址;
})

后来，我们采用了第三种解决方式，有效规避了浏览器带来的这类问题。

最后，宣传一下，欢迎更多小伙伴使用华为云镜像容器服务，体验地址：https://console.huaweicloud.com/swr/

相关推荐