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

Steven 发布于2019-08-23 12:43 / 3566人阅读

摘要：在打开一个新窗口时，由于浏览器的安全机制，用户未始终允许的情况下，可能会触发到浏览器拦截，无法正常直接弹出。只分析使用代码手动打开新窗口的方式。所有浏览器都不允许非用户操作引起的打开新窗口。

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

网上有很多给出解决方案的只言片语，不够全面，所以针对自己遇到的问题做了详细的情况分析。总结成文，避免以后混淆。

只分析使用 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 事件进行新窗口的打开。

云服务器 GPU云服务器新窗口打开打开新窗口 ajax打开新窗口 js跳转新窗口打开

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98968.html

js 打开新窗口方式

摘要：之前的项目，有个功能是下载文件，这里只要在浏览器输入就会下载那个文件了。之前的项目，有个功能是下载文件，这里只要在浏览器输入 url 就会下载那个文件了。当时我只是简单得使用 window.open ，但是却会被浏览器进行拦截，要手动开启才行，然后就搜索研究其他方法，就看到各种各样的，通过 js 打开新窗口的方法了，这里就总结一下解决下载功能这里就先说解决下载功能的方法，通过同事...

mgckid 2019-08-21 17:21 评论0 收藏0
js 打开新窗口方式

摘要：之前的项目，有个功能是下载文件，这里只要在浏览器输入就会下载那个文件了。之前的项目，有个功能是下载文件，这里只要在浏览器输入 url 就会下载那个文件了。当时我只是简单得使用 window.open ，但是却会被浏览器进行拦截，要手动开启才行，然后就搜索研究其他方法，就看到各种各样的，通过 js 打开新窗口的方法了，这里就总结一下解决下载功能这里就先说解决下载功能的方法，通过同事...

Jensen 2019-08-01 17:54 评论0 收藏0
window.open 打开新窗口被拦截的解决方案

摘要：使用包装一下，也可以防止被浏览器拦截。注意这里的超时时间不能太短，否则也会被拦截。我们会遇到想要弹出一个窗口，可是却是在事件执行后，才去弹出来的，这时就会被浏览器拦截，我们可以通过下面的方法来避免先用打开一个窗口，然后修改地址。最近公司开发的一个项目，平凡用到下载各种类型的文件，但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开，影响用户体验，尝试各种方案和百...

JeOam 2019-08-22 18:16 评论0 收藏0