html5中页面可见性的判断附代码

一、需求描述

在一些需要监听用户操作的场景中，我们经常需要进行页面可见性的判断，例如当页面被切换到其他浏览器标签页或最小化时，停止视频或音乐的播放。那么如何在HTML5中实现页面可见性的判断呢？

二、可见性事件API

HTML5为页面可见性提供了可见性事件API——Page Visibility API，它可以用来检测页面是否处于可见状态。当然，这个API只能检测页面是否被用户最小化、隐藏、或切换到另外的标签页了。事件有两种：visibilitychange（页面可见性状态发生变化）和fullscreenchange（全屏状态变化，需要用户授权）。

    document.addEventListener('visibilitychange', handleVisibilityChange, false);

    function handleVisibilityChange() {
      if (document.hidden) {
        // 页面不可见时的操作
      } else {
        // 页面可见时的操作
      }
    }
    

三、页面可见性属性

HTML5还提供了一个可供检测的属性——document.hidden。当页面不可见时，它的值为true，否则为false。同样，这个属性也不能检测全屏状态变更。

    if (document.hidden) {
      // 页面不可见时的操作
    }
    

四、注意事项

需要注意的一点：部分浏览器可能不支持Page Visibility API，因此我们需要进行判断并使用相应的方法来实现页面可见性的判断。

    var hidden, visibilityChange;

    if (typeof document.hidden !=='undefined') { // Opera 12.10及以上版本、Firefox 18及以上版本、Chrome 14及以上版本、Safari 6.1及以上版本支持Page Visibility API
      hidden='hidden';
      visibilityChange='visibilitychange';
    } else if (typeof document.mozHidden !=='undefined') { // 只有Firefox 10及以上版本支持mozHidden属性
      hidden='mozHidden';
      visibilityChange='mozvisibilitychange';
    } else if (typeof document.msHidden !=='undefined') { // 只有IE10及以上版本支持msHidden属性
      hidden='msHidden';
      visibilityChange='msvisibilitychange';
    } else if (typeof document.webkitHidden !=='undefined') { // 只有Chrome25及以上版本和Safari6及以上版本支持webkitHidden属性
      hidden='webkitHidden';
      visibilityChange='webkitvisibilitychange';
    }

    document.addEventListener(visibilityChange, handleVisibilityChange, false);

    function handleVisibilityChange() {
      if (document[hidden]) {
        // 页面不可见时的操作
      } else {
        // 页面可见时的操作
      }
    }
    

总结

HTML5提供的Page Visibility API和document.hidden属性可以帮助我们实现页面可见性的判断。使用这项技术可以避免一些与用户操作有关的问题，并优化网站或应用的性能。需要注意的是，部分浏览器可能不支持这项技术，因此需要进行兼容性处理。