知識 分享 互助 懶人建站

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

    福利彩票排列7走势图