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

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

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

只分析列举使用 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 表示被拦截,√ 表示新窗口正确打开

直接打开

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

方式ChromeFirefoxEdgeIE
window.open()xxxx
a.click()xxxx
form.submit()xxxx

用户点击行为

  1. 按钮点击后直接打开

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

    方式ChromeFirefoxEdgeIE
    window.open()
    a.click()
    form.submit()
  2. 按钮点击后延时打开

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

    方式ChromeFirefoxEdgeIE
    window.open()××
    a.click()××
    form.submit()××
  3. 按钮点击后在异步请求回调中打开

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

    方式ChromeFirefoxEdgeIE
    window.open()xxxx
    a.click()xxxx
    form.submit()xxxx

用户键盘行为

我们以 input 元素进行测试(其他元素其他键盘事件也有相同效果),因为最可能使用的情况为 input 中使用回车打开新窗口。

  1. input keydown后直接打开

    方式ChromeFirefoxEdgeIE
    window.open()xx
    a.click()xx
    form.submit()xx

    其中 ie9、ie10虽然会弹出拦截弹窗提示,但是能打开新窗口

  2. 按钮点击后延时打开

    方式ChromeFirefoxEdgeIE
    window.open()xxx
    a.click()xxx
    form.submit()xxx
  3. 按钮点击后在异步请求回调中打开

    方式ChromeFirefoxEdgeIE
    window.open()xxxx
    a.click()xxxx
    form.submit()xxxx

规则总结

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

解决方案

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么叫组件化开发

1、https://www.zhihu.com/question/29735633 (什么叫组件化开发)转载于:https://www.cnblogs.com/smght/p/8694229.html

php5.5 session,(五)ThinkPHP实践之Session驱动-TTLSA

Session驱动是指Session在thinkphp中的存储驱动,通过不同的方式,可以将Session存储在不同的“容器”中对Session有兴趣的的朋友可以查阅相关资料,本篇仅针对thinkphp的session驱动进行讲解一、DB驱动知识点:1、thinkphp框架默认DB…

Java 8备忘单中的可选

Java 8 java.util.Optional<T>是scala.Option[T]和Data.Maybe在Haskell中的较差表亲。 但这并不意味着它没有用。 如果您不熟悉此概念&#xff0c;请将Optional想象为可能包含或不包含某些值的容器。 就像Java中的所有引用都可以指向某个对象或为null &#xff0c; Optio…

SQL Server2012 安装方法

请看 https://blog.csdn.net/monkeybrothers/article/details/78021848转载于:https://www.cnblogs.com/nanqiang/p/9596528.html

卡方线性趋势检验_SPSS:趋势卡方检验

SPSS&#xff1a;趋势卡方检验毕业季接近尾声&#xff0c;通过答辩的各位同学们即将开始新的旅程。回顾论文点滴&#xff0c;想必既有心酸又充满欣慰。回顾毕业生咨询论文写作得到一个启示与各位分享&#xff1a;论文完成的过程也是还原临床研究的过程&#xff0c;论文收集资料…

让 Chrome 崩溃的一行 CSS 代码

一般的 CSS 代码只会出现 UI 版式或者兼容性方面的小问题。但这里我们要分享一行有趣的 CSS&#xff0c;它可以直接让你的 Chrome 页面挂掉 :) 复现 在 Chrome 里打开一个稍复杂的页面&#xff0c;比如知乎或者掘金打开开发者工具&#xff0c;为页面 <body> 增加样式 s…

oracle块空间的使用,Oracle管理存储架构(二)--Oracle管理数据块空间

1、数据块的概念数据块是数据库中最小的分配单元&#xff0c;块是数据库使用的最小的I/O单元&#xff0c;由一个或多个操作系统block组成。数据块由block header 、free space 、data 组成&#xff0c;oracle 10g 标准块是8k&#xff0c;支持2~32k。块头&#xff1a;包含块地址…

在JBoss 7中使用HA Singleton

不久前&#xff0c;我不得不更改Quartz Scheduler的标准集群行为&#xff0c;并使其能够在不同步数据库的情况下工作。 当然&#xff0c;有很多选择可以做到这一点&#xff0c;但是由于我是简单性的忠实拥护者&#xff0c;因此我决定使用标准的Spring Scheduled配置&#xff0c…

软件目录结构规范

软件目录结构规范 为什么要设计好目录结构? "设计项目目录结构"&#xff0c;就和"代码编码风格"一样&#xff0c;属于个人风格问题。对于这种风格上的规范&#xff0c;一直都存在两种态度: 一类同学认为&#xff0c;这种个人风格问题"无关紧要"…

软件工程的基本步骤

&#xff11;问题定义 问题定义阶段必须回答的关键问题&#xff1a;“要解决的问题是什么&#xff1f;”如果不知道问题是什么就试图解决这个问题&#xff0c;显然是盲目的&#xff0c;只会白白浪费时间和金钱&#xff0c;最终得出 的结果很可能是毫无意义的。尽管确切地定义问…

matlab norm函数使用_matlab norm(a-b)

(示例: X(1:10,1:10)zeros(10,10),LX[X,X;X,X]) Matlab 中冒号(: )的使用方法小结: (1)用于生成向量,a:b,一般要求 a一、matlab 基本操作 Matlab 概率论与数理统计 1. ...概率密度函数 1 (1) 均匀分布:unifpdf(x,a,b)...{X 3}, p1normcdf(5,3,2)- normcdf(2,3,......[A B];rank…

解决MyEclipse JAVA EE无法识别Base64问题

第一步&#xff1a;右击项目选择Build Path,选择Configure Build Path第二步:点击JRE System Library选择右边的Edit第三步&#xff1a;选择Alternate JRE,点击Install JREs第四步&#xff1a;移出原有的MyEclipse自带的 JRE&#xff0c;&#xff08;选中后点击remove&#xff…

JavaFX的响应式设计

使用CSS技术&#xff0c;为您的网站创建响应式设计相对容易。 根据屏幕的大小&#xff0c;您可以使用其他CSS文件和布局。 在JavaFX中&#xff0c;乍一看这似乎有点困难&#xff0c;因为CSS仅负责样式&#xff0c;而不负责布局。 但是&#xff0c;为各个屏幕尺寸使用不同的FXML…

用Vue Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅(上篇)

前言 本人移动端开发妹子工程师一枚 &#xff0c;因为公司项目需要用到前端的技术(主要是vue)&#xff0c;自己自学了一段时间&#xff0c;最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项目直播班&#xff0c;不要嘲笑我)&am…

python自动补全库_这个库厉害了,自动补全Python代码,节省50%敲码时间

近日&#xff0c;Reddit 上的一篇帖子引起了网友的热议。帖子作者「mlvpj」称&#xff1a;「我们使用深度学习完成了一个简单的项目&#xff0c;可以自动进行 Python 代码补全。」根据介绍&#xff0c;该项目基于 LSTM 模型&#xff0c;训练后&#xff0c;负责对代码的缺失部分…

matlab 小波 cdd,[Matlab] 单导联心电数据的小波(包)消噪及压缩

% 用小波(包)对MitbihCmprTstExample_08730_01(软硬阈值)进行消噪与压缩clear all;clc;close all;disp(用小波(包)对MitbihCmprTstExample_08730_01(软硬阈值)进行消噪和压缩);load MitbihCmprTstExample_08730_01.mat;countlength(sig);xsig(:,1); ysig(:,2); zsig(:,3);TSx(2…

系统重装助手教你如何在Microsoft Edge中恢复“关闭所有选项卡”警告

在Microsoft Edge中&#xff0c;当您打开多个选项卡时&#xff0c;浏览器将显示“您要关闭所有选项卡吗&#xff1f;” 警告&#xff0c;以防止您意外关闭重要标签。 通常&#xff0c;在没有第二个想法的情况下&#xff0c;您会立即禁用此功能&#xff0c;检查提示中的“始终关…

受JAAS保护的JAX-RS端点

随着RESTFUL&#xff08;JAX-RS&#xff09;作为创建Web服务端点的“首选”方式的问世&#xff0c;很长一段时间以来&#xff0c;我一直想知道人们如何围绕它实现安全机制。 归根结底&#xff0c;我假设JAX-RS的基础实现是servlet&#xff0c;因此其安全性也可能围绕容器&…

es springboot 不设置id_springboot整合ES_文档ID删除

1.本课程涵盖**SpringBoot2.x版本10个常用技术点适应企业开发要求&#xff0c;学习IDEA开发工具下的SpringBoot2.x开发学习SpringBoot2.x - 基于Restful接口开发规范学习SpringBoot2.x - 官方推荐模版引擎 - Thymeleaf开发学习SpringBoot2.x - MockMVC测试学习SpringBoot2.x - …

前端必须懂的计算机网络知识—(跨域、代理、本地存储)

前端必须懂的计算机网络知识系列文章&#xff1a; DNS服务器和跨域问题计算机网络的分层模型IP地址和MAC地址前端必须懂的计算机网络知识—(跨域、代理、本地存储)前端必须懂的计算机网络知识—(TCP)前端必须懂的计算机网络知识—(HTTP)前端必须懂的计算机网络知识—(XSS、CSR…