99插插插,亚洲伦理中文在线,站长推荐一二三区欧美,青青草在线导航

×

當前窗口獲得焦點js事件【visibilitychange】

  • 作者:sdfcsd
  • 來源:互聯(lián)網(wǎng)
  • 瀏覽:100
  • 2020-04-17 15:42:15

當前窗口獲得焦點js事件,html5發(fā)布之前我們使用window.onfocus和window.onblur來獲得窗口焦點和失去窗口焦點,

webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial>

當前窗口獲得焦點js事件,html5發(fā)布之前我們使用window.onfocus和window.onblur來獲得窗口焦點和失去窗口焦點,

 監(jiān)聽 onfocus() 和window.onblur()事件實現(xiàn)

//當前窗口得到焦點 
window.onfocus = function() { 
  //播放動畫或視頻 
}; 
 
//當前窗口失去焦點 
window.onblur = function() { 
  //暫停動畫或視頻 
};

這個方法可以實現(xiàn)切換標簽暫停動畫視頻,但是會帶來一個問題,由于是判斷焦點,如果是在當前頁面上鋪上一個小窗口,那當前頁面就暫停了動畫,試想,如果你一邊看片,一邊開個聊天窗口與MM聊天,當你操作聊天窗口的時候,視頻暫停了,這并不是你想要的效果。

現(xiàn)在我們來看看HTML5是怎么解決的。H5 提供了很多簡單實用的 API,Page Visibility API 就是其中之一。 Page Visibility API能有效的幫助我們完成這樣的判斷。

 使用html5的Page Visibility API來實現(xiàn)

這個 API 本身非常簡單,由以下三部分組成。

document.hidden:表示頁面是否隱藏的布爾值。頁面隱藏包括 頁面在后臺標簽頁中 或者 瀏覽器最小化 (注意,頁面被其他軟件遮蓋并不算隱藏,比如打開的 sublime 遮住了瀏覽器)。

document.visibilityState:表示下面 4 個可能狀態(tài)的值

hidden:頁面在后臺標簽頁中或者瀏覽器最小化

visible:頁面在前臺標簽頁中

prerender:頁面在屏幕外執(zhí)行預渲染處理 document.hidden 的值為 true

unloaded:頁面正在從內(nèi)存中卸載

Visibilitychange事件:當文檔從可見變?yōu)椴豢梢娀蛘邚牟豢梢娮優(yōu)榭梢姇r,會觸發(fā)該事件。

這樣,我們可以監(jiān)聽 Visibilitychange 事件,當該事件觸發(fā)時,獲取 document.hidden 的值,根據(jù)該值進行頁面一些事件的處理。

document.addEventListener(\'visibilitychange\', function() { 
  var isHidden = document.hidden; 
  if (isHidden) { 
    // 動畫視頻暫停 
  } else { 
    // 動畫視頻開始 
  } 
});

結(jié)合demo中的實例,切換標簽或者最小化的時候,demo中的視頻會暫停,恢復當前頁面時,demo中的視頻會繼續(xù)播放。完整的代碼如下:

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"); 
 
// 如果頁面被隱藏,則暫停播放,如果頁面恢復,則繼續(xù)播放 
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 { 
  // 監(jiān)聽visibilityChange事件    
  document.addEventListener(visibilityChange, handleVisibilityChange, false); 
     
  // 當播放器暫停的時候,將頁面標題設(shè)置為:Paused. 
  videoElement.addEventListener("pause", function(){ 
    document.title = \'Paused\'; 
  }, false); 
     
  // 當播放器正常播放時,將頁面標題設(shè)置為:Playing. 
  videoElement.addEventListener("play", function(){ 
    document.title = \'Playing\';  
  }, false); 
}

免責聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻自行上傳,本網(wǎng)站不擁有所有權(quán),也不承認相關(guān)法律責任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容,請發(fā)送郵件至:operations@xinnet.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,本站將立刻刪除涉嫌侵權(quán)內(nèi)容。

免費咨詢獲取折扣

Loading
人妻在线插入| 亚洲自拍偷拍一期二期| 三区不卡视频| 干日韩美女| 五月丁香激| 大香蕉在线最新地址| 黑人与亚洲人三级片| 可以免费看的黄片一级A| 伊人网三级| 中欧美日韩性屄| 亚洲欧洲99久久| 婷婷香港香蕉久久久久久| 午夜精品999蜜桃| 国产精选视频福利| 日本久久久亚洲| 亚洲成人精品视频在线| 超碰在线caopornm| 91黑丝大奶白虎少妇淫语| 婷婷大香蕉免费a电影| 天操天天干天操天天干| 很黄的网站99| 先生国产精品区| 日韩国产一二三区| 一本一道久久精品综合红桃| 加勒比狠狠干| 日B小视颜| av男人电影网| 欧美图片综合一区| 橙色一区二区三区在线观看| 久久人妻侵犯电影| 大香蕉123v区| 国产 欧美 精品| 国际精品欧美精品| 欧美国产日韩国产一区| 日韩欧美在线免费一区二区| 日本vs久久精品| 亚洲欧美日韩综合精品二区| 熟女也疯狂久久久| 国产精品久久一区二区三区三州| 91天天色天天爱| 伦精品在线|