知识 分享 互助 懒人建站

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

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

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

    作者:速博娱乐是什么 来源: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】-最新评论

    网站地图 凱旋门官方网站 百乐坊娱娱乐 新世纪娱乐最新网址
    太阳城游戏网址 申博下载官网 申博怎么提款 沙巴体育投注平台
    龙虎国际官方开户 67彩官方网站登入 君博国际线上开户 美国大西洋城
    东方夏威夷官方网站 明陞国际备用 澳门威尼斯人赌场 凯斯娱乐备用网址
    金榜娱乐备用网址 东方夏威夷备用网址 金赞官方网站 大玩家备用网址
    595PT.COM 381sunbet.com 8AKS.COM DC738.COM 171sj.com
    307SUN.COM 697XTD.COM 538sj.com S618M.COM 958PT.COM
    186ib.com 1112934.COM XSB558.COM 11sbib.com S618C.COM
    588TGP.COM XSB1111.COM S618W.COM 1112989.COM 88sbsg.com