python对话框机制_Chromium 新的弹窗机制以及 HTML 的 dialog 元素
自 1995 年 JavaScript 诞生之初,就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中,Chrome 团队一直在修改原生弹窗的表现。
但是这种阻断式的弹窗总被各种广告网站恶意使用,因为只要弹窗出现,JavaScript 引擎就会一直等待,知道用户操作。所以这种原生弹窗的最大用处不是用来提示用户信息,而是伤害用户(Tech support scammers use subdomain trick to defeat blocking)。
因此 Chromium 团队强烈建议你不要使用这类弹窗。
而弹窗和 onbeforeunload 事件相结合之后那简直就是大杀器,而此类弹窗经常被用来提示浏览者xxxx。
Chromium 团队在 Chrome 51 中移除了对 onbeforeunload 弹窗的支持。在此之前 Safari 9.1 和 Firefox 4 早就已经移除了。当我们在 onbeforeunload 事件中调用 alert 时,会在 devtools 中产生警告:
Blocked alert('before unload') during beforeunload.
除此之外,alert()、confirm()、prompt() 的行为也做了改变,不再作为顶级的原生弹窗而存在,当弹窗所在的浏览器标签被切走后,它们会自动消失。(Safari 9.1 说:“你怎么到现在才来学啊!”)
Chromium 在官方博客中说到:
对于 alert()/confirm()/prompt() 我们有很多替代的选择。 譬如需要弹个通知消息时(日历应用)可以用Notifications API。 获取用户输入可以用 HTML 中的 元素。 对于 XSS proofs-of-concept 则可用 console.log(document.origin)。
作为 HTML 5.2 的元素,目前除了 Chrome 和 Opara 以外,其它浏览器均未支持。但是 Google 提供了一个 dialog-polyfill。
一个最简单的例子:
This is da dialog!
这段 html 什么也不显示,开发者需要使用 javascript 的 API .show() 和 .close() 来控制 dialog 的显示和隐藏。
This is da dialog!
Close
Open Dialog!
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
点击按钮会出现一个弹窗(非常丑)
不过 dialog 作为一个 html 标签,是可以使用 css 的。我们给它加一段 css 样式:
dialog {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
再点击按钮,弹窗了一个稍微漂亮点的弹窗:
我们还可以使用 .showModal() 弹窗一个模态对话框,当我们关闭弹窗时触发 close 事件。我们还可以使用 ESC 键关闭一个弹窗,此时会触发 cancel 事件。和其它所有事件一样,我们可以通过调用 event.preventDefault() 来阻止默认行为。
直接弹窗一个模态窗口是不够友好的,有时我们需要把背景虚化:
通过使用 CSS 的伪元素 ::backdrop 很容易就可以做到:
dialog::backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
}
为什么使用 元素而不是第三方的 javascript 库?
我觉得两者并不冲突,目前大部分 javascript 库都是使用
相比
开发面向未来的前端,当有 polyfill 方案时,我们应该总是使用最新标准。
python对话框机制_Chromium 新的弹窗机制以及 HTML 的 dialog 元素相关推荐
- python的回收机制_Python的垃圾回收机制深入分析
一.概述: Python的GC模块主要运用了"引用计数"(reference counting)来跟踪和回收垃圾.在引用计数的基础上,还可以通过"标记-清除"( ...
- python 线程安全的数据类型_详解python多线程、锁、event事件机制的简单使用
详解python多线程.锁.event事件机制的简单使用 发布时间:2020-09-25 02:04:12 来源:脚本之家 阅读:117 作者:君惜 线程和进程 1.线程共享创建它的进程的地址空间,进 ...
- Python的内存管理与垃圾回收机制
在使用真格量化时,一些用户希望了解如何来提高系统性能.通过了解Python的内存管理和垃圾回收机制,我们可以有针对性地去提高策略代码性能. Python内存管理机制 Python的内存管理机制:引入计 ...
- python解析原理_Python语法垃圾回收机制原理解析
一 引入 解释器在执行到定义变量的语法时,会申请内存空间来存放变量的值,而内存的容量是有限的,这就涉及到变量值所占用内存空间的回收问题,当一个变量值没有用了(简称垃圾)就应该将其占用的内存给回收掉,那 ...
- Linux 2.6内核中新的锁机制--RCU [转]
2005 年 7 月 01 日 本文详细地介绍了 Linux 2.6 内核中新的锁机制 RCU(Read-Copy Update) 的实现机制,使用要求与典型应用. 一. 引言 众所周知,为了保护共享 ...
- linux 内核 工作队列,Linux内核新旧工作队列机制的剖析和比较
摘要:在中断驱动的程序设计中,工作队列是一种强有力的工具.但是在Linux2.6.35及其以前的内核版本中,每创建一个工作队列就创建与CPU数目相同的内核线程,耗费大量的内核资源:工作只能严格串行的处 ...
- python的循环语句机制_Python-for循环的内部机制
Python中,使用for循环可以迭代容器对象中的元素,这里容器对象包括是列表(list).元组(tuple).字典(dict).集合(set)等.但是,为什么这些对象可以使用for循环进行操作呢? ...
- SQLite内部机制和新特性
SQLite内部机制和新特性 一.B-tree和Pager模块 B-tree为SQLite VDBE提供了O(logN)级时间复杂度的插入和查询,通过双向遍历记录实现O(1)级时间复杂度的删除.B-t ...
- 伦敦大学研究:新的长寿机制,延长端粒,阻止衰老
衰老,是一个复杂.多阶段.渐进的过程,发生在生命的整个过程.随着时间的流逝,人体的器官.肌肉会逐渐衰老,一些疾病也伴随着年龄的增长而发生,包括癌症.糖尿病.心血管疾病等. 所有细胞都逃不过衰老的命运, ...
最新文章
- java中随机数怎么定义类_浅析Java中的随机数类
- Scala apply()方法用于创建伴生类对象
- 二分法在顺序排列的字典中查找单词(二分)
- figma下载_Figma重新构想的团队库
- 如何用java实现加减_用Java实现不用加减乘除做加法操作
- 使用一个程序同时启动多个程序(c#)
- 《C和指针》——数组的存储顺序
- ios 横向滚轮效果_iOS 可以纵向横向滑动的表格实现
- 2019 蓝桥杯省赛 A 组模拟赛(一)阶乘位数
- 自动驾驶软件开发人才现状_浅析自动驾驶的重要一环:感知系统发展现状与方向...
- CString::GetLength()获得字节数的正确方法介绍
- maven生成可执行jar包
- 绝对引用计算机几级,计算机一级必考的14个Excel函数,让我来告诉你
- win7读取linux硬盘序列号,Windows 下获取硬盘序列号
- 购买了ESET NOD32 授权
- SQL基础教程(第2版)读书笔记
- RTKLIB(二)——RTKPOST
- 在ubuntu系统上安装指定版本的gfortran
- 规范化:范式(主属性,非主属性,1NF,2NF,3NF,BCNF:定义,例子等)
- linux连接wifi的方法
热门文章
- python操作mysql的增删改查_详解使用pymysql在python中对mysql的增删改查操作(综合)...
- linux服务器性能监控命令汇总之dstat命令(二)
- mysql的min函数的使用方法_MySQL中MIN()函数的使用教程
- 微信小程序asp服务器架设,asp写的微信小程序支付demo-服务器端是asp+mdb的
- java实现qq抢红包_微信抢红包到底是怎么抢到的?
- c语言n位水仙花数简书,Kotlin中函数式编程API(8)求阶乘和计算水仙花数
- csgo国服文件转国际服务器,csgo国际服怎么转国服 csgo国际服转到国服方法介绍...
- java 递归return_java递归和反向递归
- go 链路追踪_【go-micro实践】jaeger分布式链路追踪
- 微软程序在Android上跑,想在Win 10上运行Android应用?这类手机用户已经可以尝鲜...