使用window.open打开新窗口被浏览器拦截的解决方案

问题描述:

代码中直接使用window.open('//www.baidu.com', '_blank');会被浏览器窗口拦截

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

解决方案

1.最常用的在ajax异步请求成功后打开新窗口

 //先在ajax函数之前打开新窗口后再加载url
    $('#btn').click(function () {
        // 打开页面,此处最好使用提示页面
        var newWin = window.open();
        newWin.document.body.innerHTML="正在加载中......";
        $.ajax({
            url: 'www.###.com',
            success: function (url) {
                // 重定向到目标页面
                newWin.location.href = url;
            }
        })
    });

2.利用a标签跳转,能解决大多数浏览器兼容问题,但是这种方不适用于ajax异步请求回调中打开新窗口,在ajax异步请求完成后调用无效(用户点击事件触发)

  function newWin(url){ //新窗口打开
        var a = document.createElement('a');
        a.setAttribute('href', url);
        a.setAttribute('style', 'display:none');
        a.setAttribute('target', '_blank');
        document.body.appendChild(a);
        a.click();
        a.parentNode.removeChild(a);
    };
     document.body.addEventListener('click', function() {
           newWin('http://www.baidu.com');
        });
    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值