详解window.open被访问器阻拦的处理计划方案

2021-02-22 20:22 jianzhan

状况

近期在做新项目的情况下碰到了应用window.open被访问器阻拦的状况,搞得人非常烦闷啊,尽管在自身的自然环境能够对网页页面开展放行,可是对客户来讲,不可以规定客户都来根据阻拦。更何况当出現阻拦时,许多小白压根不知道道产生了啥,不知道道在哪儿里看被阻拦的网页页面,真是悲催啊~~。

此外,能够发现,当window.open为客户开启恶性事件內部或载入时,不容易被阻拦,1旦将弹出编码挪动到ajax或1段多线程编码內部,立刻就出現被阻拦的主要表现了。

缘故剖析&深层次科学研究

当访问器检验到非客户实际操作造成的新弹出对话框,则会对其开展阻拦。由于访问器觉得这并不是1个客户期待看到的网页页面。

例如对js中立即实行的,以下编码:

js code:

//  立即开启1个网页页面
window.open('//www.baidu.com', '_blank');

访问器 ie8 chrome 40 firefox 34 opera 27 safari 5.1.7

是不是阻拦弹出 N N Y Y Y 而针对以下编码:

js code:

    document.body.addEventListener('click', function() {
        window.open('//www.baidu.com', '_blank');
    });

全部访问器都不容易阻拦。

综上所述,各访问器对阻拦机会的分辨不1致,而针对放在ajax回调函数中的编码,反映又不同样了,这里就已不赘述。可是,被访问器阻拦大家编码中要弹出的对话框其实不是程序流程员所期待的。

处理计划方案:

1、应用a标识取代

得出以下涵数,将此涵数关联到click的恶性事件回调函数中,便可以免绝大多数访问器对对话框弹出的阻拦:

js code:

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();
}

2、应用form的submit方式开启1个网页页面

这类方式必须结构1个from,随后由js编码开启form的submit,将表单递交到1个新的网页页面,编码较长,在这里就不写了,大伙儿了解有这类计划方案就可以了。

大伙儿留意,以上两种方式不合适放在ajax的回调函数涵数中,假如放在回调函数涵数中,仍然会被访问器阻拦。
3、终极处理计划方案--先弹出对话框,随后重定项

第3种计划方案,实际上是1种变通计划方案,关键观念是:先根据客户点一下开启网页页面,随后再对网页页面开展重定项。示例编码以下。

js code:

xx.addEventListener('click', function () {
        // 开启网页页面,此处最好是应用提醒网页页面
        var newWin = window.open('loading page');

        ajax().done(function() {
            // 重定项到总体目标网页页面
            newWin.location.href = 'target url';
        });
    });

以上方式实际上是开启了两个详细地址,因此提议大伙儿开启第1个详细地址的情况下得出1个相近‘当今网页页面正在载入中,请稍后。。’的简易提醒页,这样能够防止开启两次真实的总体目标网页页面,让客户发觉到网页页面的重定项。
处理方式2:

<a href="javascript:;" onclick="dialog();">点一下弹窗</a>

<script>
function dialog(){
    $.ajax({
        url: 'url',
        type: 'POST',
        dataType: 'json',
        async: false,  // 此处务必界定为同歩
        data: {param1: 'value1'},
        success: function(data){
            window.open(data.url, '_blank');  //进行弹窗
        }
    })
}    
</script>

该方式缺点:

实测能处理绝大多数访问器的阻拦难题,可是处理不上安全性手机软件的阻拦(360不容易阻拦,可是QQ大管家会阻拦)

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。