<meter id="7ntxv"></meter>

<b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
<nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

    <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
    <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

    <mark id="7ntxv"></mark>
    <meter id="7ntxv"><var id="7ntxv"></var></meter>

    知識 分享 互助 懶人建站

      懶人建站專注于網頁素材下載,提供網站模板、網頁設計、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】-最新評論

      亚洲免费的黄色网站_黄色网站在线放久操射视频_A片www.黄色网站成年人_天天干 天天操天天干

      <meter id="7ntxv"></meter>

      <b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
      <nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

        <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
        <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

        <mark id="7ntxv"></mark>
        <meter id="7ntxv"><var id="7ntxv"></var></meter>