Window.open在chrome中被block issue分析及解决

这两天遇到一个诡异问题，页面上的两个链接，最终都是调用window.open来打开另一个子系统的页面，其中一个可以在Chrome中打开新Tab，而另一个却被block。

Case 1:

<a href="javascript: void(0);" οnclick='openNewWindow();'>open</a> 

   -- ok

Case 2:

 

$("#id").click(function(){..blabla...});

    -- Blocked

    仅为示例，中间调用了一堆组件或业务代码。

 

百思不得其解，因为看上去并无不同，只能求助于万能的谷歌，找到了下面的两篇文章：

How to Bypass Google Chrome’s Javascript Popup Blocker

Avoid Browser Pop-up Blockers

由这些可以得出结论：如果window.open不是直接用户动作触发的话，那么就会被浏览器block。譬如，如果你在click事件处理器中加入setTimeout来进行延时的话，就有可能发生这种情况。在一些古老的浏览器中，调用链的深度也是一个考量因子。

而在我们的这个案例中，最后发现在所使用的组件中，其调用了setTimeout进行延时，从而导致会被Chrome block。

这其中也暴露了另外一个问题，该组件加入时延是通过一个输入参数来决定的，而该参数的默认值是允许时延，但实际情形是大多数情形下并不需要它 - 所以API设计也是我们需要仔细思量的一件事情。

 

后来也写了一个简单的html来测试这个case，发现在chrome和FF中，当将延时设为1000ms时，其并不会block；但设为1001时，就会block；而在ie8中，就算是1ms也会block。

 

以上测试都没有修改浏览器的默认block行为。

 

等后面如果有空看下chrome的code来看看具体的block实现机制。