如何解决javascript弹窗被阻止?——华为云bug解决
现象
近期,客户在使用我们华为云镜像容器服务(SWR)的时候,反馈了一个问题——在镜像构建的源码托管中绑定gitHub或gitee账户的时候,会弹出弹框,但是这个弹框被chrome浏览器禁止。
(地址:https://console.huaweicloud.com/swr/?region=cn-east-2#/app/s2i/oauth ,欢迎大家使用华为产品,如有不足,敬请微信(微信号:809742006)告知!)
这个问题,让一些用户在初次使用的时候,不知道如何解决,用户体验非常不好。
虽然这看上去是浏览器的原因,但是作为这个项目的前端开发人员,务必要通过技术手段去解决,保证用户有足够良好的体验。
问题分析
在我们SWR项目中,多处使用了这类绑定按钮,比如再创建构建任务中的绑定和上述源码托管中的绑定,这两个绑定按钮打开弹窗,前者不被阻止,后者被阻止,通过对比、文献查阅等途径,我们发现一个规律:
如果单纯使用window.opne();并不会被阻止;
如果在异步请求后的回调函数中使用,则会被阻止。
(地址: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/