知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    当前窗口获得焦点js事件【visibilitychange】

    作者:bbin视讯真人娱乐平台登入 来源:jquery插件 2016-11-09 人气:
    当前窗口获得焦点js事件,html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点,使用html5的Page Visibility API来实现

    当前窗口获得焦点js事件,html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点,

    监听 onfocus() 和window.onblur()事件实现

    //当前窗口得到焦点 
    window.onfocus = function() { 
      //播放动画或视频 
    }; 
     
    //当前窗口失去焦点 
    window.onblur = function() { 
      //暂停动画或视频 
    };

    这个方法可以实现切换标签暂停动画视频,但是会带来一个问题,由于是判断焦点,如果是在当前页面上铺上一个小窗口,那当前页面就暂停了动画,试想,如果你一边看片,一边开个聊天窗口与MM聊天,当你操作聊天窗口的时候,视频暂停了,这并不是你想要的效果。

    现在我们来看看HTML5是怎么解决的。H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一。 Page Visibility API能有效的帮助我们完成这样的判断。

    使用html5的Page Visibility API来实现

    这个 API 本身非常简单,由以下三部分组成。

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

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

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

    visible:页面在前台标签页中

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

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

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

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

    document.addEventListener('visibilitychange', function() { 
      var isHidden = document.hidden; 
      if (isHidden) { 
        // 动画视频暂停 
      } else { 
        // 动画视频开始 
      } 
    });

    结合demo中的实例,切换标签或者最小化的时候,demo中的视频会暂停,恢复当前页面时,demo中的视频会继续播放。完整的代码如下:

    var hidden, visibilityChange;  
    if (typeof document.hidden !== "undefined") {  
      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(); 
      } 
    } 
     
    // 判断浏览器的支持情况 
    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { 
      consol.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."); 
    } else { 
      // 监听visibilityChange事件    
      document.addEventListener(visibilityChange, handleVisibilityChange, false); 
         
      // 当播放器暂停的时候,将页面标题设置为:Paused. 
      videoElement.addEventListener("pause", function(){ 
        document.title = 'Paused'; 
      }, false); 
         
      // 当播放器正常播放时,将页面标题设置为:Playing. 
      videoElement.addEventListener("play", function(){ 
        document.title = 'Playing';  
      }, false); 
    }

    ↓ 查看全文

    当前窗口获得焦点js事件【visibilitychange】由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    当前窗口获得焦点js事件【visibilitychange】-最新评论

    网站地图 ag视讯网址登入 ag旗舰厅游戏网址登入 ag视讯游戏登入
    申搏官网登陆失败 申博太阳城娱乐管理网 申博百家乐 菲律宾申博官方网址
    皇冠博彩网站 名人彩票app下载直营网 宝马彩票开户直营网 申博娱乐网官网
    ag旗舰厅申博登入 ag视讯注册登入 bbin视讯电子游戏登入 gp视讯官网登入
    ag视讯平台登入 ag视讯官方网站登入 gp视讯网站登入 ag旗舰厅线路检测登入
    3454111.COM 117cw.com S618Y.COM 586sunbet.com 716SUN.COM
    798DC.COM 555TGP.COM 657SUN.COM 777sbmsc.com 162SUN.COM
    0888tyc.com XSB418.COM 898cw.com 591ib.com 729cw.com
    218sunbet.com 444TGP.COM 11sbsg.com 958XTD.COM 822TGP.COM