window.open() 与浏览器阻止弹出窗口
发布在lingyired's 前端专栏2014年11月13日view:15339
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

window.open() 的作用是创建一个新的浏览器窗口用来打开相关的资源,这是一个原生的 Javascript API 接口。有关 window.open() 的基本使用可以参考 mozilla 提供的  API 文档:window.open 。

大部分现代的浏览器(泛指 Chrome / Firefox / IE 10+ / Safari)都默认开启了阻止弹出窗口的策略,原因是 window.open 被广告商滥用,严重影响用户的使用。这个阻止弹出窗口的操作,并不是直接封杀 windw.open(),而是会根据用户的行为来判断这次 window.open() 是否属于流氓操作。

如果是由用户触发的动作所引起的 window.open 就不会被浏览器所阻止,比如写在 onclick 这些事件 handler 里的,但如果是代码自己触发的就被阻止。

大家可以打开以下两个页面进行测试:

如果你的浏览器是默认的设置(开启了阻止弹出窗口),那么你就能发现,demo1 中点击完按钮后窗口就直接弹出来了,而 demo2 则在两秒后会被浏览器告知有一个窗口被阻止了。从 demo 中看起来很浅显易懂,也很能明白浏览器们的做法。

但是问题来了,如果是用户点击后,我们的程序需要运行一些代码然后才执行 window.open() ,这种情况是否会被阻止呢? (实现开发中的各种情况各种需求都十分操蛋。)

对于这种情况,我们来做个简单的例子,就是点击按钮之后将 window.open() 延迟一下,看看浏览器们有什么反应。我们可以使用 setTimeout() 来做这个的处理。相关代码片段:

$('#test-btn').on('click', function(){
    setTimeout(function(){
        var windowOpen = window.open('http://lingyi.red', 'lingyired' , 'status=no,menubar=no,titlebar=no,toolbar=no,directories=no, width=800,height=600, top=0, left=0');   
        if (windowOpen == null || typeof(windowOpen)=='undefined'){
           $('#feedback').html('窗口无法打开,请检查你的浏览器设置。')
        } else {
           $('#feedback').html('窗口打开成功了.' );
        }  
    }, 100);
});

当延迟 100 毫秒的时候,Chrome 会让窗口弹出,但是当延迟 2000 毫秒(即 2s )时这个操作会被阻止。经过多次试验,我发现这个临界值是 1000 毫秒

1000 毫秒的时候允许弹出框, 1001 毫秒的时候被阻止。

大家可以通过根据 demo3 (点击这里(本着用户都是傻逼才加上这个)来测试,修改代码中的延迟值来试。这个临界值,在 Safari / Chrome / Firefox (都是 for Mac) 下测试,均通过,都是 1001 毫秒的时候被阻止。

结果拿到 IE 11 下测试,发现就算是 1 毫秒都会被阻止。(意料之中)

我们先撇开 IE 的差异,我尝试把 setTimeout 转换成一些逻辑的代码放在 window.open() 前面,比如:

$('#test-btn').on('click', function(){
    var nowtime = new Date().getTime();
    for (var i = 0; i <= 300000000; i++) {
        if (i == 111111) {
            console.log(i);
        };
    };
    console.log(new Date().getTime() - nowtime);
    windowOpen = window.open('http://lingyi.red/', 'lingyired', 'status=no,menubar=no,titlebar=no,toolbar=no,directories=no, width=800,height=600, top=0, left=0');   
    if (windowOpen == null || typeof(windowOpen)=='undefined'){
        $('#feedback').html('已触发:窗口无法打开,请检查你的浏览器设置。')
    } else {
        $('#feedback').html('已触发:窗口打开成功了')
    }  
    console.log(new Date().getTime() - nowtime);

});

通过修改循环次数来不断实验,发现临界值最终大概在 950-1050  之间的区域就会触发阻止弹出窗,而大于这个值的,基本都会直接阻止弹出窗,之所以不是 1000 准,应该是在运行的过程中有轻微影响到了时间值。

整体来说,Safari / Chrome / Firefox (桌面版) , 对于用户点击事件后的 window.open() 有 1s 的延迟容忍度。

返回来测试了下 IE 11 的表现,发现:

  • setTimeout 内的 window.open() 一律都被阻止,哪怕只是延迟 1毫秒
  • 对于逻辑运算的延迟则有比较大的容忍度,至少 3s 内依然被放行(没有再继续测试下去)

然后顺便测试了下 Safari for iPad 8.0 的情况,发现:

  • 根据用户的设置(设置 -> Safari -> 阻止弹出窗口),无差别阻止或允许窗口的弹出窗。
  • 如果用户去掉了阻止弹出窗口的选项,那么无论是由用户点击的还是程序自行触发的,通通会弹出一个下的窗口询问用户是否要打开新的窗口。

弄完之后得出的小结是:

如果是由用户点击触发的 window.open() 代码前面,可以加上少量简单的逻辑代码来运行,但请控制在执行时间为 1s 内。

不过由于各种原因,我们的 window.open() 会经常性的被阻止掉,虽说浏览器本身有对这个阻止事件做通知,但是由于用户是白痴的(不要问我为什么),我们最好也在界面上做一些通知告知用户。

我们可以利用 window.open () 的 return 值来判断 window.open 的执行情况,window.open 的返回值是一个打开的新窗口对象的引用, 如果 window.open 的操作被阻止,那么它的返回值就是 undefined

那么我们就可以利用返回值来判断这个 window.open 操作是否被正常的执行。

大家可以看到上面的 demo1 / demo2 有一个 feedback 的文字,就是根据 window.open() 的返回值来做判断的。我还是把部分代码发一下吧:

var windowOpen = window.open('http://lingyi.red/', 'lingyired', 'status=no,menubar=no,titlebar=no,toolbar=no,directories=no, width=800,height=600, top=0, left=0');   
if (windowOpen == null || typeof(windowOpen)=='undefined'){
   $('#feedback').html('已触发:窗口无法打开,请检查你的浏览器设置。')
} else {
   $('#feedback').html('已触发:窗口打开成功了')
}  

这样的话,就可以在界面上比较清晰的告知用户是怎么回事了。

如果你的用户确实是傻逼的话,那么你可以根据用户的浏览器版本,来告诉用户怎么解除在他的浏览器中解除这个玩意。。。

扩展阅读:

大家知道,如果父子窗口(当前窗口为父,window.open() 后的窗口为子)符合同源策略的话,父窗口里面是可以控制子窗口的,包括刷新、执行函数、跳转链接。

那么这里有一个方法可以绕开浏览器阻止弹窗的机制(针对桌面),就是点击按钮后先打开一个符合同源策略的 window ,然后再执行你相关的逻辑包括 Ajax 请求等。完成之后,再来处理子窗口。假设 windowRef 是 window.open() 的返回值

  • windowRef.close() 是关闭窗口
  • windowRef.location.href = url 是跳转链接

但是这种奇葩方法的体验不是很好,就是会预先弹出一个窗口,如果你运行的逻辑代码很长的话,用户会不知道干啥,可能会关闭了窗口。当然你们也可以在子窗口那里先留下一些文字,告诉用户不要关闭,请等待之类的。

原文地址: http://lingyi.red/window-open-and-the-browser-to-block-pop-up-window

评论
发表评论
3年前

@lingyired 我不是要打开新窗口,我就是要实现打开新标签页的效果。所以只能用链接的方法

3年前

@Kyrios 主要是时间的问题,如果是异步 ajax 请求就很难达到要求。

3年前

@YuC_C 看原文。。 只要是跟随在用户点击之后,就可以弹出

3年前

@lingyired 但是这里的弹出框只有用户初次点击才会出现,资料提交过一遍就不会再出现了。

3年前

@lingyired 恩,可以尝试下

3年前

第一次知道原来window.open是可以放在异步里面的!以前以为只要不是用户行为触发都会被阻止

3年前

@YuC_C 没办法。 链接元素直接执行 .click() 是无法触发新窗口的。 不应该 $('#link').click() ,而是直接在 $('#confirm').on('click', function(){}) 内部 window.open() 一个窗口

3年前

@lingyired 是的,是直接$('#link').click()。怎么实现可以避免被拦截呢?

3年前

@YuC_C 下面的(然后触发链接的点击事件) 里面,该不会是直接 $(’#link’).click() ? 这样的话当然不行

3年前

@lingyired 在链接的handler中,就是弹出一个弹出框让用户填资料,填完后用户点击提交,要打开新页面。现在打开新页面的方式就是移除当前的handler,然后用js触发链接的点击事件,大致是这样的:

$('#link').on('click', function(){
// 弹出弹出框,让用户输入信息
...
$('#link').off('click');
return false;
})

// 在弹出框中
$('#confirm').on('click', function(){
// 验证用户输入信息是否合法,然后触发链接的点击事件,这时候链接已经没有事件处理函数了,它会走默认行为,即在target="_blank"中打开新页面
})
3年前

@YuC_C JS 触发 click 事件? 只要是非用户的点击行为都会被阻止。 js 触发的基本无解了。。 你这种情况,一定需要弹出一个 window 来输入信息吗?不能 pop-up 一个 form 出来让他填?

3年前

最近碰到的问题是,不用window.open(),而是用<a href="xxx" target="_blank">some text</a>,当用户点击时,弹出一个窗口,让用户输入信息,点确定以后再移除此链接的click事件,再用js触发click事件,让页面在新标签页打开。这样,浏览器也会拦截,有办法解决吗

WRITTEN BY
PUBLISHED IN
lingyired's 前端专栏

将博客内的前端内容转发到这里,希望得到指点。

我的收藏