浏览器visibilitychange事件
2023-06-13 09:12:10 时间
大家好,又见面了,我是你们的朋友全栈君。
1. 项目中,从一个页面进入到另一个页面,然后在这个页面做一些修改后返回到第一个页面,这个时候第一个页面没有刷新只类似tab切换,所以用户的修改未生效。使用html的浏览器事件 visibilitychange
2. 此事件已经得到了广泛应用,但是一些老版本的浏览器需要加相应的前缀
3. 微信内置的浏览器因为没有标签,所以不会触发该事件 手机端直接按Home键回到桌面,也不会触发该事件 PC端浏览器失去焦点也不会触发该事件,但是最小化回到桌面会触发
4. 定义有两个只读的document属性: hidden和visibilityStat document.hidden是一个布尔值,简单的表示标签页显示或者隐藏(隐藏包括页面在后台标签页中或者浏览器最小化,但是不包括被其他软件比如打开的sublime遮盖) document.visibilityState属性更详细,有四个值 =》visible: 页面在前台标签中 =》hidden: 页面在后台标签页或者浏览器最小化 =》uploaded: 页面正在从内存中卸载 =》prerender: 页面在屏幕外执行预渲染处理,document.hidden的值为true
function getHiddenProp(){
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++){
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
function getVisibilityState() {
var prefixes = ['webkit', 'moz', 'ms', 'o'];
if ('visibilityState' in document) return 'visibilityState';
for (var i = 0; i < prefixes.length; i++) {
if ((prefixes[i] + 'VisibilityState') in document)
return prefixes[i] + 'VisibilityState';
}
// otherwise it's not supported
return null;
}
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
var visProp = getHiddenProp();
if (visProp) {
var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
document.addEventListener(evtname, function () {
document.title = document[getVisibilityState()]+"状态";
},false);
}
转载于:https://www.cnblogs.com/lindsayzhao103011/p/8884418.html
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148461.html原文链接:https://javaforall.cn
相关文章
- Oracle等待事件原因和一般解决方法:control file sequential read
- jquery事件delegate()方法用法详解[通俗易懂]
- 面试官:哪些浏览器事件不会冒泡?
- JavaScript 事件循环
- 李一男造车失败;马云卸任浙商总会会长;特斯拉或将迎来华人CEO | 每日大事件
- 吴恩达的2022年终AI大事件盘点
- 【EventBus】EventBus 源码解析 ( 事件发送 | 线程池中执行订阅方法 )
- 【Java AWT 图形界面编程】事件处理机制 ③ ( AWT 中常见的事件和事件监听器 | 低级事件 | 组件事件 | 窗口事件 | 鼠标事件 | 高级事件 | 动作事件 | 事件监听器 )
- 单线程事件处理器ControllerEventManager
- onbeforeunload事件详解编程语言
- JS用户界面事件(UI事件)
- 李若彤就阿里女员工被侵害事件发声:恳请一起关注
- javascript浏览器判断绑定事件arguments转换数组数组遍历
- IE和firefox浏览器的event事件兼容性汇总
- 文本框中,回车键触发事件的js代码[多浏览器兼容]
- jquery下onpropertychange事件的绑定方法
- jQuery学习笔记之jQuery的事件
- 跨浏览器的事件对象介绍
- javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
- js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
- .net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
- 解析javascript浏览器关闭事件
- 阻止事件(取消浏览器对事件的默认行为并阻止其传播)
- js中的eventType事件及其浏览器支持性介绍
- js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
- 浏览器窗口加载和大小改变事件示例
- JSP中用回车监听按钮事件兼容火狐IE等主流浏览器
- java抓取鼠标事件和鼠标滚轮事件示例
- JavaScript监听和禁用浏览器回车事件实例