设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 77|回复: 0

[HTML5/CSS3] 使用HTML5里页面可见性接口判断用户是否正在观看你的页面

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2016-10-12 09:30:43 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
使用HTML5里页面可见性接口判断用户是否正在观看你的页面


长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了?他们切换回来了么?现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。

document.hidden
这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false。

document.visibilityState
visibilityState的值要么是visible (表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden (页面不是当前激活tab页面,或者窗口最小化了。),或者prerender (页面在重新生成,对用户不可见。).

visibilitychange事件
监听页面可见性变化非常容易:
  1. // 各种浏览器兼容
  2. var hidden, state, visibilityChange;
  3. if (typeof document.hidden !== "undefined") {
  4.         hidden = "hidden";
  5.         visibilityChange = "visibilitychange";
  6.         state = "visibilityState";
  7. } else if (typeof document.mozHidden !== "undefined") {
  8.         hidden = "mozHidden";
  9.         visibilityChange = "mozvisibilitychange";
  10.         state = "mozVisibilityState";
  11. } else if (typeof document.msHidden !== "undefined") {
  12.         hidden = "msHidden";
  13.         visibilityChange = "msvisibilitychange";
  14.         state = "msVisibilityState";
  15. } else if (typeof document.webkitHidden !== "undefined") {
  16.         hidden = "webkitHidden";
  17.         visibilityChange = "webkitvisibilitychange";
  18.         state = "webkitVisibilityState";
  19. }

  20. // 添加监听器,在title里显示状态变化
  21. document.addEventListener(visibilityChange, function() {
  22.         document.title = document[state];
  23. }, false);

  24. // 初始化
  25. document.title = document[state];
复制代码

上面的代码会在页面可见性发生变化时修改document.title的值!

那么,什么时候需要使用visibilitychange事件呢?比如,如果你的页面上有嵌入视频正在播放,当用户切换到其它标签页时,你的标签页上的视频应自动暂停播放,当用户切换回来时继续接着播放。再比如,如果你的页面有自动刷新动作,当用户切换到其它标签页时,你就应该停止刷新,而当用户切换回来时继续之前的动作
Demo Code:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>使用HTML5里页面可见性接口判断用户是否正在观看你的页面</title>
  7. </head>
  8. <body>
  9. <div>注意观察浏览器标签页tab上显示的title,然后切换浏览器标签页,观看标签页title的变化</div>
  10. <script>
  11. // Adapted slightly from Sam Dutton
  12. // Set name of hidden property and visibility change event
  13. // since some browsers only offer vendor-prefixed support
  14. var hidden, state, visibilityChange;
  15. if (typeof document.hidden !== "undefined") {
  16.     hidden = "hidden";
  17.     visibilityChange = "visibilitychange";
  18.     state = "visibilityState";
  19. } else if (typeof document.mozHidden !== "undefined") {
  20.     hidden = "mozHidden";
  21.     visibilityChange = "mozvisibilitychange";
  22.     state = "mozVisibilityState";
  23. } else if (typeof document.msHidden !== "undefined") {
  24.     hidden = "msHidden";
  25.     visibilityChange = "msvisibilitychange";
  26.     state = "msVisibilityState";
  27. } else if (typeof document.webkitHidden !== "undefined") {
  28.     hidden = "webkitHidden";
  29.     visibilityChange = "webkitvisibilitychange";
  30.     state = "webkitVisibilityState";
  31. }
  32. // Add a listener that constantly changes the title
  33. document.addEventListener(visibilityChange, function() {
  34.     document.title = document[state];
  35. }, false);
  36. // Set the initial value
  37. document.title = document[state];
  38. </script>
  39. </body>
  40. </html>
复制代码

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-4 14:09

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表