乐趣区

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

在打开一个新窗口时,由于浏览器的安全机制,用户未始终允许的情况下,可能会触发到浏览器拦截,无法正常直接弹出。
网上有很多给出解决方案的只言片语,不够全面,所以针对自己遇到的问题做了详细的情况分析。总结成文,避免以后混淆。
只分析使用 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 事件进行新窗口的打开。

退出移动版