| js 离开或进入浏览器页面的事件监听 visibilitychange | 您所在的位置：网站首页 › 切换其他浏览器 › js 离开或进入浏览器页面的事件监听 visibilitychange |
|
当用户最小化窗口或切换到另一个选项卡时，API会发送visibilitychange事件，让监听者知道页面状态已更改。你可以检测事件并执行某些操作或行为不同。例如，如果您的网络应用正在播放视频，则可以在用户将标签放入背景时暂停视频，并在用户返回标签时恢复播放。 用户不会在视频中丢失位置，视频的音轨不会干扰新前景选项卡中的音频，并且用户在此期间不会错过任何视频。 使用场景： 轮播图 只有在用户观看轮播图的时候才开启定时器 切换页面关掉定时器当用户最小化窗口或切换到另一个选项卡时，页面播放中的视频暂停，用户在此期间不会错过任何视频。这种体验是用户无感知的，并且对于用户体验是非常友好的。注意：虽然onblur和onfocus会告诉你用户是否切换窗口，但不一定意味着它是隐藏的。当用户切换选项卡或最小化包含选项卡的浏览器窗口时，页面才会隐藏。 该API的属性和事件：document.hidden: 如果页面处于被认为是对用户隐藏状态时返回true，否则返回false。 document.visibilityState : 是一个用来展示文档可见性状态的字符串。可能的值： visible : 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。hidden : 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。unloaded : 页面正在从内存中卸载。 注释：浏览器支持是可选的。 示例： 1. 开启关闭定时器： document.addEventListener('visibilitychange',function(){ if(document.hidden){ clearInterval(timer); //清除定时器 } else { timer = setInterval(autoMove, 3000); //开启定时器 } } 2. 视频播放切换：demo地址 Sorry, there's a problem playing this video. Please try using a different browser. // 设置隐藏属性和改变可见属性的事件的名称 var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } var videoElement = document.getElementById("videoElement"); // 如果页面是隐藏状态，则暂停视频 // 如果页面是展示状态，则播放视频 function handleVisibilityChange() { if (document[hidden]) { videoElement.pause(); } else { videoElement.play(); } } // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告 if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."); } else { // 处理页面可见属性的改变 document.addEventListener(visibilityChange, handleVisibilityChange, false); // 当视频暂停，设置title // This shows the paused videoElement.addEventListener("pause", function(){ document.title = 'Paused'; }, false); // 当视频播放，设置title videoElement.addEventListener("play", function(){ document.title = 'Playing'; }, false); } 兼容性处理：为了支持老版本的浏览器，我们需要对document.hidden、document.visibilityState 在做一些前缀处理： function getHiddenProp(){ var prefixes = ['webkit','moz','ms','o']; // 如果hidden 属性是原生支持的，我们就直接返回 if ('hidden' in document) { return 'hidden'; } // 其他的情况就循环现有的浏览器前缀，拼接我们所需要的属性 for (var i = 0; i return prefixes[i] + 'Hidden'; } } // 其他的情况 直接返回null return null; } function getVisibilityState() { var prefixes = ['webkit', 'moz', 'ms', 'o']; if ('visibilityState' in document) { return 'visibilityState'; } for (var i = 0; i return prefixes[i] + 'VisibilityState'; } } // 找不到返回 null return null; } |
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 |