window.open()被浏览器拦截问题

一、原因

浏览器为了维护用户安全和体验,在JS中直接使用window.open(url,"_blank")来打开新的链接是会被拦截的,(window.open(url,”_self”)改变当前的窗口是可以生效的),通常项目需要在ajax异步请求完成后来打开新链接,下面提供几种解决方案

二、解决方案

方案一、

创建一个a标签,利用a标签跳转,能解决大多数浏览器兼容问题,但是这种方法写在ajax异步请求完成后调用无效

function openWin(url) {
    var a = document.createElement("a"); //创建a标签
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    document.body.appendChild(a);
    a.click(); //执行当前对象
}
openWin("./page/......");

方案二、

模拟form表单提交,能解决大多数浏览器兼容问题,但是这种方法写在ajax异步请求完成后调用无效

var form = document.createElement('form');
form.action = '"./page/a.html?id=1';
form.target = '_blank';
form.method = 'POST';
document.body.appendChild(form);
form.submit();

方案三、

在ajax调用之前先打开窗口,然后再设置新窗口的url来达到跳转的效果,但是该方法如果ajax响应太慢,则会出现一个空白窗口,影响用户体验,所以建议给该新窗口增加提示“正在拼命加载中”,但是我觉得这个并不是最好的解决方案

//先在ajax函数之前打开新窗口,后再加载url
$('#btn').click(function () {
    //打开一个不被拦截的新窗口
    var win = window.open();
    win.document.body.innerHTML="正在拼命加载中......";
    $.ajax({
        url: 'a.com',
        success: function (url) {
            //修改新窗口的url
            win.location.href = url;
        }
    })
});

方案四、

把ajax异步改成同步,该方法会阻塞浏览器运行导致卡顿,经过测试,就算改成同步,chrome还是会阻拦,Firefox不会阻拦

//先在ajax同步函数之后打开新窗口
$('#btn').click(function () {
    $.ajax({
        url: 'a.com',
        async: false,  // 同步,意味着执行该ajax完成后,后续代码才继续运行
        success: function (url) {
        }
    });

    //执行完ajax后再打开新窗口
    window.open("./page/......", "_blank");
});

 

方案五、

 

把ajax执行完后,弹出一个弹出框提示用户,由用户确认点击打开,这个方法目前感觉是最友好的

$('#btn').click(function () {
    $.ajax({
        url: 'a.com',
        success: function (url) {
            option.open({
                //type: 1,
                icon: 3,
                title: "支付",
                btn: ['立即查看', '取消'],
                content: "文件已经校验成功,请查看结果",
                btn1: function (index) {
                    option.closeAll();
                    window.open("./page/......");
                },
                btn2: function (index) {
                    option.closeAll();
                }
            });
        }
    });
});

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用`window.open`方法打开一个新窗口时,有时候浏览器拦截这个操作,阻止新窗口的打开。这是因为浏览器内置了一些安全机制,旨在防止恶意弹窗和广告等不受用户控制的行为。 浏览器拦截`window.open`的主要原因可能包括以下几点: 1. 弹窗拦截浏览器拦截那些未经用户交互而直接打开的新窗口,以防止恶意网站滥用弹窗功能。这是为了保护用户免受不必要的干扰和潜在的安全风险。 2. 广告拦截:一些浏览器会自动屏蔽那些被认定为广告的弹窗。这些浏览器会根据广告过滤规则或者用户自定义的设置来判断哪些弹窗是广告,并将其拦截。 3. 浏览器设置:用户可能在浏览器的设置中主动选择了阻止弹窗的选项,这样浏览器就会拦截`window.open`方法打开的新窗口。 如果你希望绕过浏览器拦截,可以尝试以下方法: 1. 触发`window.open`方法的操作必须是由用户主动触发的,例如在点击事件中调用`window.open`方法。这样可以避免被浏览器拦截。 2. 检查浏览器的弹窗拦截设置,确保它没有被启用或者将你的网站添加到白名单中。 3. 使用浏览器提供的替代方法,例如`window.location.href`来打开新的URL,或者使用`<a>`标签的`target="_blank"`属性来实现类似的功能。 请注意,绕过浏览器拦截机制可能会违反用户的期望和浏览器的安全策略。因此,在进行任何操作之前,请确保你的意图是合法和符合用户体验的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值