window下的窗口事件-js
window.onfocus = function(){ // 窗口获取焦点事件};
window.onblur= function(){ // 窗口失去焦点事件};
有弊端,亲测。
所以我还有一个更好的办法,就是监听页面是否在当前,而不是最小化或离开了。
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
// 我回来了。
}
}); 2018年12月7日:补充,有兼容问题。
于是我找到了这个兼容代码:
// 兼容代码到ie9
(function() {
let hidden = 'hidden';
const onchange = function(evt) {
const v = 'visible';
const h = 'hidden';
const evtMap = { focus: v, focusin: v, pageshow: v, blur: h, focusout: h, pagehide: h };
evt = evt || window.event;
if (evt.type in evtMap) {
document.body.className = evtMap[evt.type];
} else {
document.body.className = this[hidden] ? 'hidden' : 'visible';
}
};
// Standards:
if (hidden in document) {
document.addEventListener('visibilitychange', onchange);
} else if ((hidden = 'mozHidden') in document) {
document.addEventListener('mozvisibilitychange', onchange);
} else if ((hidden = 'webkitHidden') in document) {
document.addEventListener('webkitvisibilitychange', onchange);
} else if ((hidden = 'msHidden') in document) {
document.addEventListener('msvisibilitychange', onchange);
} else if ('onfocusin' in document) {
// IE 9 and lower:
document.onfocusin = document.onfocusout = onchange;
} else {
// All others:
window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;
}
// set the initial state (but only if browser supports the Page Visibility API)
if (document[hidden] !== undefined) {
onchange({type: document[hidden] ? 'blur' : 'focus'});
}
})();
大神的地址:https://www.cnblogs.com/zichi/p/5158745.html
window下的窗口事件-js的更多相关文章
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
- c++ 在window下创建窗口的基本步骤
1. WinMain 函数的定义: 2. 创建一个窗口 2.1 设计一个窗口类 WNDCLASS 2.2 注册窗口类 2.3 创建窗口 2.4 显示及更新窗口 3. 进行消息循环 BOOL GetMe ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js
<script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...
- 关于 IE firefox Chrome下的通过用js 关闭窗口的一些问题
首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的,原因在于: ~~~ie可直接<button onclick="windo ...
- js关闭浏览器窗口事件
js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. <html> <head /> <body> <script typ ...
- js学习笔记23----窗口尺寸及窗口事件
窗口尺寸: 可视区的尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 documen ...
- window.opener方法的使用 js跨域
原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个lo ...
- node-webkit学习之【无边框窗口用JS实现拖动改变大小等】
效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...
随机推荐
- 【BZOJ1484】[HNOI2009]通往城堡之路 (贪心)
[BZOJ1484][HNOI2009]通往城堡之路 (贪心) 题面 BZOJ 洛谷 题解 我大概是不会的. 大概是,首先把所有的人全部弄成最低的值,再一次次拔高一个后缀. 其他的全是抄的,百度随便找 ...
- JavaScript学习复习
JavaScript 输出 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML 文档中. 使用 innerHTML 写入到 HTML 元 ...
- 2019.3.12考试&2019.3.13考试&ESTR
过程:太菜了,不写了 T1 基环树直径,一定学 T2 树上斜率优化,类似购票,数据结构/分治算法,一定改 (把点按深度排序倒着跑2e7次斜率优化也能A,orz zyz) T3 CC原题,码码码,一定补 ...
- 音视频处理之PS封装的介绍与使用20180928
1.PS封装介绍MPEG2-PS是一种多路复用数字音频,视频等的封装容器.PS是Program Stream(程序流或节目流)的简称.程序流将一个或多个分组但有共同的时间基准的基本数据流(PES)合并 ...
- 在windows上部署使用Redis出现问题的解决方法
下载Redis 在Redis的官网下载页上有各种各样的版本,我这次是在windows上部署的,要去GitHub上下载.目前的是2.8.12版的,直接解压,在\bin\release 目录下有个压缩包, ...
- MySQL-->高级-->001-->MySQL备份与恢复测试
- react入门-组件方法、数据和生命周期
react组件也像vue一样,有data和methods,但是写法就很不同了: <!DOCTYPE html> <html lang="en"> <h ...
- ansible报错Aborting, target uses selinux but python bindings (libselinux-python) aren't installed【转】
报错内容: TASK [activemq : jvm configuration] ********************************************************** ...
- day63_SpringMVC学习笔记_01
1.JAVAEE体系结构 JAVAEE体系结构图如下所示: 2.什么是springmvc? 什么是mvc? Model1 Model2 SpringMVC是什么? SpringMVC是一个web层mv ...
- 20155303 2016-2017-2 《Java程序设计》第六周学习总结
20155303 2016-2017-2 <Java程序设计>第六周学习总结 课堂笔记 高效学习法推荐 看视频学习(2h)→ 以代码为中心看课本,思考运行结果并验证(3h)→ 课后作业验证 ...