document.visibilityState 监听浏览器最小化

document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。

document.visibilityState:表示下面 4 个可能状态的值

hidden:页面在后台标签页中或者浏览器最小化

visible:页面在前台标签页中

prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true

unloaded:页面正在从内存中卸载

Visibilitychange事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。

这样,我们可以监听 Visibilitychange 事件,当该事件触发时,获取 document.hidden 的值,根据该值进行页面一些事件的处理。

1 document.addEventListener(‘visibilitychange‘, function() {
2   var isHidden = document.hidden;
3   if (isHidden) {
4     document.title = ‘当焦点不在当前窗口时的网页标题‘;
5   } else {
6     document.title = ‘再变回来或者做点其他的‘;
7   }
8 });

只要懂得了原理, 怎么做都随你!~

时间: 2024-08-29 21:43:39

document.visibilityState 监听浏览器最小化的相关文章

JS 监听浏览器标签页显示隐藏

JS 监听浏览器标签页显示隐藏 API document.hidden 判断页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 document.visibilityState (只读属性), 返回document的可见性,4个值: hidden:文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' visible:此页面在前景标签页中,并且窗口没有最小化 prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 tru

【hugo】- hugo 监听浏览器切换title

hugo 博客 监听浏览器title 动态改变浏览器title标题 找到head.html themes/maupassant/layouts/partials/head.html 添加监听js 可以从html中发现,分为home页面和其他页面,两种展示的不同,所以需要改这两部分 {{ if .IsHome -}} <title>{{ .Site.Title }} | {{ .Site.Params.subtitle}}</title> <meta property=&quo

js 监听浏览器刷新还是关闭事件

原作者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件

监听浏览器窗口大小的改变

<script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) { winWidth = window.innerWidth; } else if ((document.body) && (document.body.clientW

监听浏览器后退事件,使其转向指定URL

$(function(){ //清空浏览器历史记录 pushHistory(); //监听浏览器后退事件 window.addEventListener("popstate", function(e) { //转向指定的URL location.href=url; }, false); //清空浏览器历史记录 function pushHistory() { var url = "#"; var state = { title: "title",

JS 监听浏览器各个标签间的切换

以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性(Page Visibility)API的简单应用. visibilitychange事件介绍 简单的说,当用户最小化网页或移动到另一个标签时,API会发送 visibilitychange 有关该网页的可见性的事件.你可以检测到该事件并执行一些操作或行为.例如:标签页隐藏的时候停止播放音乐视频.停

vue监听浏览器返回

代码 监听返回 mounted () { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); } }, destroyed () { window.removeEventListener('popstate',

监听浏览器返回键、后退、上一页事件(popstate)操作返回键

在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一.简单介绍 history 中的操作 1.window.history.back(),后退 2.window.history.forward(),前进 3.window.history.go(num),前进或后退指定数量历史记录 4.window.history.pushState(state, t

监听浏览器返回,上一页事件

在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一.简单介绍 history 中的操作 1.window.history.back(),后退 2.window.history.forward(),前进 3.window.history.go(num),前进或后退指定数量历史记录 4.window.history.pushState(state, t