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

相信大家对 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)

窗口特征（Window Features）