window.open被浏览器拦截

最近同事做的一个项目用到了window.open来打开新窗口，但是客户说有打不开网页的情况出现，我便帮他搜罗了一下window.open的资料，转载于此，对比与a标签的href链接跳转，后者没有那么多问题，最好还是用a标签吧。

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）

如果你的浏览器是默认的设置（开启了阻止弹出窗口），那么你就能发现，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 是跳转链接

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