JavaScript检测页面是否为当前的窗口(兼容多浏览器)

可以使用Page Visibility API来检测页面是否为当前的窗口。当浏览器不兼容page visibility api时,可以监听window的blur/focus事件.

Page Visibility API兼容的浏览器:

  • Chrome 13+
  • Internet Explorer 10+
  • Firefox 10+
  • Opera 12.10+

代码如下:

(function() {
  var hidden = "hidden";

  // 标准浏览器:
  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);
  // IE 9以下版本:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // 其他浏览器使用blur/focus时间:
  else
    window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

  function onchange (evt) {
    var v = "visible", h = "hidden",
        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";
  }

  // 对支持Page Visibility API的浏览器设置初始状态
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();

版权声明:著作权归作者所有。

相关推荐

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

Angular CLI:集成Autoprefixer兼容多浏览器以及浏览器版本

Angular CLI使用Autoprefixer来兼容不同的浏览器以及多个浏览器版本,我们不需要做额外的工作来集成Autoprefixer。Autoprefixer内部依赖于Browserslist,根据Browserslist的配置决定兼容哪些浏览器或浏览器版本。如果我们对浏览器的兼容范围有自己的需求,可以设置Browserslist的配置。集成Browserslist配置到Angu

JavaScript检测浏览器支持的视频格式以及音频格式

不同的浏览器支持的视频/音频格式有所不同,为了在多个浏览器上兼容视频/音频的播放,需要使用JavaScript检测浏览器所支持的视频/音频格式。HTMLVideoElement和HTMLAudioElement继承于HTMLMediaElement,HTMLMediaElement的canPlayType()方法可以用来判断浏览器是否支持指定的多媒体格式。语法str = aud

页面调试禁用Chrome浏览器的缓存

在前端开发过程中,页面调试时常常需要清理浏览器的缓存,下面介绍两种禁用Chrome缓存的方法。方法一:1、F12打开开发这工具2、选中开发者工具的Network标签3、把Disable cache勾选上,如图注意:禁用Chrome的缓存只有在开发者工具打开时才起作用。方法二安装清理缓存的Chrome插件。可以试一下Cache Killer。