常识 共享 合作 bodog官网

    bodog官网专心于网页资料下载,供给博狗博彩、网页规划、ps资料、图片资料等,服务于【个人站长】【网页规划师】和【web开发从业者】的代码资料与规划资料网站。

    bodog官网供给网页资料下载、博狗博彩
    常识 共享 合作!

    当时窗口取得焦点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】由bodog官网收集整理,您能够自在传达,请主动带上本文链接

    bodog官网便是免费共享,觉得有用就多来支撑一下,没有能帮到您,懒人也只能表明遗憾,期望有一天能帮到您。

    当时窗口取得焦点js事情【visibilitychange】-最新谈论