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

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

Case 1:

<a href="javascript: void(0);" onclick='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实现机制。

 

你可能感兴趣的:(JavaScript)