在打开一个新窗口时，由于浏览器的安全机制，用户未始终允许的情况下，可能会触发到浏览器拦截，无法正常直接弹出。
网上有很多给出解决方案的只言片语，不够全面，所以针对自己遇到的问题做了详细的情况分析。总结成文，避免以后混淆。
只分析列举使用 js 代码手动打开新窗口的方式。
测试代码用例在此
几种打开新窗口的方式
window.open()- 创造 a 链接，手动触发
a.click()- 创造 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 |
用户点击行为
- 按钮点击后直接打开即在按钮被点击的回调中，直接调用打开新窗口的代码
方式 | Chrome | Firefox | Edge | IE |
window.open() | √ | √ | √ | √ |
a.click() | √ | √ | √ | √ |
form.submit() | √ | √ | √ | √ |
- 按钮点击后延时打开即在按钮被点击的回调中，通过 setTimeout 执行打开新窗口代码
方式 | Chrome | Firefox | Edge | IE |
window.open() | √ | √ | × | × |
a.click() | √ | √ | × | × |
form.submit() | √ | √ | × | × |
- 按钮点击后在异步请求回调中打开即在按钮被点击的回调中，发送请求，并在请求的回调中执行打开新窗口代码
方式 | Chrome | Firefox | Edge | IE |
window.open() | x | x | x | x |
a.click() | x | x | x | x |
form.submit() | x | x | x | x |
用户键盘行为
我们以 input 元素进行测试（其他元素其他键盘事件也有相同效果），因为最可能使用的情况为 input 中使用回车打开新窗口。
- input keydown后直接打开
方式 | Chrome | Firefox | Edge | IE |
window.open() | √ | x | √ | x |
a.click() | √ | x | √ | x |
form.submit() | √ | x | √ | x |
其中 ie9、ie10虽然会弹出拦截弹窗提示，但是能打开新窗口
- 按钮点击后延时打开
方式 | Chrome | Firefox | Edge | IE |
window.open() | √ | x | x | x |
a.click() | √ | x | x | x |
form.submit() | √ | x | x | x |
- 按钮点击后在异步请求回调中打开
方式 | Chrome | Firefox | Edge | IE |
window.open() | x | x | x | x |
a.click() | x | x | x | x |
form.submit() | x | x | x | x |
规则总结
- 就参与测试的浏览器，三种打开新窗口的方式对拦截结果没有影响。
- 所有浏览器都不允许非用户操作引起的打开新窗口。
- 所有浏览器都不允许在异步 ajax 请求中打开新窗口。
- Edge 和 IE 不允许在 setTimeout 中打开新窗口，Chrome、Firefox 允许在用户操作事件中的 setTimeout 中打开新窗口。
- Firefox 和 IE 不允许在用户键盘操作事件中打开新窗口
解决方案
- 需要在异步 ajax 请求中打开新窗口的可以使用请求前打开新窗口，请求拿到结果后再修改窗口地址的方式。
- 需要在键盘回车事件中打开新窗口的推荐使用 form 表单包装并添加 button 的方式，回车触发默认的 submit 事件进行新窗口的打开。
