浏览器为什么要拦截 window.open() 方法

Question

相信大家对window.open()方法都不陌生吧，window.open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口，这在我们开发Web应用的时候非常有用，比如你需要弹出一个窗口让用户登录。

最近我就开发一个弹窗登录的功能，满以为很简单的，但是实际操作却遇到了诸多麻烦，比如window.open()的弹窗被浏览器拦截，印象中Chrome和Firefox浏览器对弹窗是比较敏感的，很多垃圾广告也是通过这个方法弹出的。

我相信存在即合理，依然window.open()已经存在这么久时间，那么肯定有方法让浏览器不去拦截，只是我们的方法没用对而已，那么有没有一种可能是浏览器认为你的站点是垃圾站而屏蔽呢？

下面我们进行实际的代码测试，比如我现在有如下代码：

$("#btn").click(function(){
    user_login();   
});
function user_login(){
    window.open("https://www.wenjiangs.com","LoginWindow","location=1,scrollbars=1," + "width=" + 500 + ",height=" + 500 + "," +"left=" + 500 + ",top=" + 200);
}

我定义一个登陆的函数，然后在一个按钮上面绑定一个点击事件，用户点击以后弹出登陆窗口，这个应该是最常见的一种写法了，你问为什么要定义一个函数，因为window.open()写法很长，而且有很多地方需要调用，所以我就自定义了一个user_login()函数。

在浏览器里面测试，点击按钮窗口被浏览器拦截了，一直想不通为什么会被拦截，后来我把自定义的函数去掉了，写最简单的代码测试下：

$("#test_btn").click(function(){
    window.open("https://www.wenjiangs.com","LoginWindow","location=1,scrollbars=1," + "width=" + 500 + ",height=" + 500 + "," +"left=" + 500 + ",top=" + 200);
}

神奇的事情发生了，这次浏览器没有拦截window.open()方法，代码中我就编写简单的代码来测试，不考虑代码的重用性，居然解决了我的疑问。

后来经过我的研究，我发觉浏览器对用户直接的操作所产生的弹窗，会自动放行不进行拦截，也就是说用户点击一个按钮，中间没有任何停顿，直接执行弹窗就不会被拦截，为了验证这个结论，我又编写了下面的代码：

$("#test_btn").click(function(){
    setTimeout(function(){
        window.open("https://www.wenjiangs.com","LoginWindow","location=1,scrollbars=1," + "width=" + 500 + ",height=" + 500 + "," +"left=" + 500 + ",top=" + 200);
    }, 1000)
}

我在中间加了一个延迟，在等待1秒后再弹出窗口，很不幸的是弹窗被浏览器拦截了，setTimeout()延迟操作导致window.open()不是第一事件下的方法，所以被浏览器认为是广告弹窗，我们经常会发现浏览网站的时候经常进入一个页面过了一分钟或者几分钟就会弹出一些广告窗口，但是大都被浏览器拦截了。

window.open()弹窗并不是一定会被浏览器拦截，关键是看我们如何编写代码，以及浏览器的拦截规则，既然JavaScript有这个方法，而且也没有被废除，那么肯定有使用的场景。

附录：Window.open() API

window.open(URL,name,features,replace)

参数	描述
URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

窗口特征（Window Features）

channelmode=yes|no|1|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0	是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes|no|1|0	是否显示地址字段。默认是 yes。
menubar=yes|no|1|0	是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0	是否显示滚动条。默认是 yes。
status=yes|no|1|0	是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0	是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

Answer 1

正所谓道高一尺魔高一丈，总有解决方法！

Answer 2

还有这样的写法内幕，涨知识了，不过广告商也是这么写的吧，所以说弹窗是无法绝对拦截的。