美文网首页
浏览器拦截打开新窗口情况总结

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

作者: 小杺 | 来源:发表于2018-11-07 12:04 被阅读3次

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

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

只分析使用 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

    其中 ie9、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 事件进行新窗口的打开。

相关文章

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

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

  • 浏览器新窗口

    打开浏览器新窗口的方法 window.open(url)用户手动打开(写在onclick事件中)不会被拦截,代码...

  • window.open被浏览器拦截的解决方案

    最近做项目遇到window.open打开窗口被浏览器拦截的问题,具体是在ajax请求数据之后打开新窗口,被浏览器拦...

  • window.open方法打开新窗口被浏览器拦截问题

    使用window.open打开新窗口时经常会被浏览器拦截,自己尝试解决方案如下: a标签替代 或者 或者 或者 重...

  • 浏览器拦截js打开新窗口

    最近做项目时,遇到的问题“想通过javascript在浏览器新标签页或新窗口打开一个新的页面,结果被浏览器大大无情...

  • Selenium+Python句柄操作

    当我们打开浏览器,点击页面链接时,经常会遇到新的页面会在新窗口打开,而Selenium不会去自动识别新窗口,所以我...

  • a标签

    新窗口打开 新窗口打开

  • 问题:图片在360浏览器不被加载,在UC浏览器强制不显示。

    浏览器广告拦截 目前大部分用户都会设置广告拦截,用js判断打开网页的是哪个浏览器,并借此提示用户关闭浏览器广告拦截...

  • 编程练习

    制作新按钮,“新窗口打开网站” ,点击打开新窗口。 任务 1、新窗口打开时弹出确认框,是否打开 提示:使用 if ...

  • 练习1-window打开网页

    编程练习制作新按钮,“新窗口打开网站” ,点击打开新窗口。 任务1、新窗口打开时弹出确认框,是否打开提示: 使用 ...

网友评论

      本文标题:浏览器拦截打开新窗口情况总结

      本文链接:https://www.haomeiwen.com/subject/ubomxqtx.html