- 1.如何判斷H5頁面有沒有被用戶瀏覽?
- 2.當(dāng)用戶沒有瀏覽頁面我們需要做一些操作,例如背景音樂暫停,定時(shí)器清空,電影暫停等等一系列操作
- 3.我們?cè)趺粗谰W(wǎng)頁有沒有被瀏覽呢?或者網(wǎng)頁有沒有沒有進(jìn)入最小化呢?
接下來給大家介紹HTML5新增的API, visibilitychange, document.hidden, document.visibilityState
1.visibilitychange事件用于監(jiān)聽網(wǎng)頁發(fā)生變化(進(jìn)入后臺(tái),進(jìn)入前臺(tái))
- 1.瀏覽器支持
visibilitychange是HTML5的API所以支持持最新瀏覽器 Chrome, Firefox, IE10+ - 2.使用, 用addEventListener添加事件,當(dāng)頁面發(fā)生改變就會(huì)調(diào)用這個(gè)函數(shù)
document.addEventListener('visibilitychange', function () {
});
ps: 老版本瀏覽器如果失效需要添加前綴
- mozvisibilitychange 火狐
- msvisibilitychange IE
- webkitvisibilitychange 谷歌,Safari
2.document.hidden
- false-當(dāng)前網(wǎng)頁正在被用戶瀏覽
- ture-當(dāng)前網(wǎng)頁進(jìn)入后臺(tái)
3.document.visibilityState
- visible 頁面為瀏覽器當(dāng)前激活,窗口不是最小化狀態(tài)
- hidden 頁面不是當(dāng)前激活,或者窗口最小化了
- prerender 頁面在重新生成,對(duì)用戶不可見
4.判斷網(wǎng)頁進(jìn)入前臺(tái)還是后臺(tái)
document.addEventListener('visibilitychange', function () {
console.log(document.hidden);
console.log("visibilityState " + document.visibilityState);
if (document.hidden) {
// 進(jìn)入后臺(tái)不被用戶瀏覽
document.title = '頁面進(jìn)入后臺(tái)';
} else if (document.hidden == false) {
// 進(jìn)入前臺(tái),用戶正在瀏覽
document.title = '頁面正在瀏覽';
}
});
持續(xù)更新使用的干貨,關(guān)注軍哥給你驚喜
微博coderYJ
簡書coderYJ
微信公眾號(hào)coderYJ
