美文网首页前端开发笔记JavaScript 进阶营让前端飞
window.open被浏览器拦截的解决办法

window.open被浏览器拦截的解决办法

作者: darrell | 来源:发表于2018-03-25 19:33 被阅读91次
    window.open被浏览器拦截的解决办法

    1,这是一个什么样的问题?

    有的时候我们想在js某一个事件之后,或者在接口回调成功之后去开启一个新窗口,这样的场景特别常见。

    但是在很多时候,新弹出来的页面。会被浏览器给拦截掉,作为开发者,我们当然可以手动给浏览器放行,打开新窗口。

    但是如果是那些对技术一无所知的小白用户,他们可能根本不会知道有一个新页面,那就比较难受了,以为是系统bug

    2,为什么会出现这个问题?

    一般情况下,如果直接在js中调用window.open()函数去打开一个新窗口,浏览器检测到的是非用户操作产生的新弹出窗口,就会对其进行阻止。因为浏览器认为这可能是一个广告,不是一个用户希望看到的页面。
    而且各个浏览器对于新窗口的拦截机制也不一样。

    3,那我们如何解决?

    3.1,用a标签代替,这样用户点击这个超链接,浏览器会认为它是打开一个新的链接,所以就不会拦截。

    这里一般的解决办法是,将a标签的target属性设置为_blank

    <a href="url" target="_blank" /> 
    

    我们也可以自己创建一个a标签的方法,然后在你想要用到的地方去调用这个方法。

    function newWin(url, id) {  
        var a = document.createElement(‘a‘);  
        a.setAttribute(‘href‘, url);  
        a.setAttribute(‘target‘, ‘_blank‘);  
        a.setAttribute(‘id‘, id);  
        // 防止反复添加  
        if(!document.getElementById(id)) {    
          document.body.appendChild(a);                                                             
        }  
        a.click();  
    }  
    

    3.2,如果我们想要打开的新窗口的url,是通过接口返回给我们的时候。

    我们可以首先新打开一个空白的窗口,然后当街口返回成功之后,我们再将新窗口的页面进行重定向就可以了。代码如下

    const newWin = window.open('about:blank;');
    
    $.ajax({
        url:'你的接口地址',
        type: 'get',
        success: function(ret){
            var url = ret.url;
            newWin.location.href = url;
        }
    })
    

    4,参考文章

    此篇文章是参考window.open被浏览器拦截的解决方案

    希望这篇文章对大家能有帮助,来自一个奔跑在前端路上的前端小白。

    相关文章

      网友评论

        本文标题:window.open被浏览器拦截的解决办法

        本文链接:https://www.haomeiwen.com/subject/mllkcftx.html