浏览器拦截打开新窗口状况总结

在打开一个新窗口时，因为浏览器的安全机制，用户未始终容许的状况下，可能会触发到浏览器拦截，没法正常直接弹出。

网上有不少给出解决方案的只言片语，不够全面，因此针对本身遇到的问题作了详细的状况分析。总结成文，避免之后混淆。

只分析使用 js 代码手动打开新窗口的方式。

测试代码用例在此

几种打开新窗口的方式

1. window.open()
2. 创造 a 连接，手动触发 a.click()
3. 创造 form 表单，手动触发 form.submit() (创造 form 表单，添加 button 子元素，手动触发 button.click() 状况相同，不作区分)

调用情形分组结果

使用 Chrome（70）、Firefox（63）、Edge、IE（9-11） 做为测试浏览器，对如下列举的打开新窗口的情形作测试。

x 表示被拦截，√ 表示新窗口正确打开

直接打开

即页面加载后直接调用打开新窗口代码

方式	Chrome	Firefox	Edge	IE
window.open()	x	x	x	x
a.click()	x	x	x	x
form.submit()	x	x	x	x

用户点击行为

1. 按钮点击后直接打开

   即在按钮被点击的回调中，直接调用打开新窗口的代码

   方式	Chrome	Firefox	Edge	IE
   window.open()	√	√	√	√
   a.click()	√	√	√	√
   form.submit()	√	√	√	√

2. 按钮点击后延时打开

   即在按钮被点击的回调中，经过 setTimeout 执行打开新窗口代码

   方式	Chrome	Firefox	Edge	IE
   window.open()	√	√	×	×
   a.click()	√	√	×	×
   form.submit()	√	√	×	×

3. 按钮点击后在异步请求回调中打开

   即在按钮被点击的回调中，发送请求，并在请求的回调中执行打开新窗口代码

   方式	Chrome	Firefox	Edge	IE
   window.open()	x	x	x	x
   a.click()	x	x	x	x
   form.submit()	x	x	x	x

用户键盘行为

咱们以 input 元素进行测试（其余元素其余键盘事件也有相同效果），由于最可能使用的状况为 input 中使用回车打开新窗口。

1. input keydown后直接打开

   方式	Chrome	Firefox	Edge	IE
   window.open()	√	x	√	x
   a.click()	√	x	√	x
   form.submit()	√	x	√	x

   其中 ie九、ie10虽然会弹出拦截弹窗提示，可是能打开新窗口

2. 按钮点击后延时打开

   方式	Chrome	Firefox	Edge	IE
   window.open()	√	x	x	x
   a.click()	√	x	x	x
   form.submit()	√	x	x	x

3. 按钮点击后在异步请求回调中打开

   方式	Chrome	Firefox	Edge	IE
   window.open()	x	x	x	x
   a.click()	x	x	x	x
   form.submit()	x	x	x	x

规则总结

1. 就参与测试的浏览器，三种打开新窗口的方式对拦截结果没有影响。
2. 全部浏览器都不容许非用户操做引发的打开新窗口。
3. 全部浏览器都不容许在异步 ajax 请求中打开新窗口。
4. Edge 和 IE 不容许在 setTimeout 中打开新窗口，Chrome、Firefox 容许在用户操做事件中的 setTimeout 中打开新窗口。
5. Firefox 和 IE 不容许在用户键盘操做事件中打开新窗口

解决方案

1. 须要在异步 ajax 请求中打开新窗口的可使用请求前打开新窗口，请求拿到结果后再修改窗口地址的方式。
2. 须要在键盘回车事件中打开新窗口的推荐使用 form 表单包装并添加 button 的方式，回车触发默认的 submit 事件进行新窗口的打开。