JS實(shí)現(xiàn)在瀏覽器標(biāo)簽頁(yè)失去焦點(diǎn)時(shí)網(wǎng)頁(yè)Title改變
說(shuō)在前面:必須是基于支持H5的瀏覽器才可以
這個(gè) API 本身非常簡(jiǎn)單，由以下三部分組成。
document.hidden：表示頁(yè)面是否隱藏的布爾值。頁(yè)面隱藏包括 頁(yè)面在后臺(tái)標(biāo)簽頁(yè)中 或者 瀏覽器最小化 （注意，頁(yè)面被其他軟件遮蓋并不算隱藏，比如打開(kāi)的 sublime 遮住了瀏覽器）。
document.visibilityState：表示下面 4 個(gè)可能狀態(tài)的值
hidden：頁(yè)面在后臺(tái)標(biāo)簽頁(yè)中或者瀏覽器最小化
visible：頁(yè)面在前臺(tái)標(biāo)簽頁(yè)中
prerender：頁(yè)面在屏幕外執(zhí)行預(yù)渲染處理 document.hidden 的值為 true
unloaded：頁(yè)面正在從內(nèi)存中卸載
Visibilitychange事件：當(dāng)文檔從可見(jiàn)變?yōu)椴豢梢?jiàn)或者從不可見(jiàn)變?yōu)榭梢?jiàn)時(shí)，會(huì)觸發(fā)該事件。
這樣，我們可以監(jiān)聽(tīng) Visibilitychange 事件，當(dāng)該事件觸發(fā)時(shí)，獲取 document.hidden 的值，根據(jù)該值進(jìn)行頁(yè)面一些事件的處理。
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
document.title = '當(dāng)焦點(diǎn)不在當(dāng)前窗口時(shí)的網(wǎng)頁(yè)標(biāo)題';
} else {
document.title = '再變回來(lái)或者做點(diǎn)其他的';
}
});以上所述是小編給大家介紹的JS實(shí)現(xiàn)在瀏覽器標(biāo)簽頁(yè)失去焦點(diǎn)時(shí)網(wǎng)頁(yè)Title改變，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js數(shù)組去重九種方式以及詳解的相關(guān)資料,js數(shù)組去重是比較常見(jiàn)的數(shù)組操作方式之一,文中介紹了九種方法,需要的朋友可以參考下2023-09-09
分析javascript中9 個(gè)常見(jiàn)錯(cuò)誤阻礙你進(jìn)步
這篇文章主要介紹了分析javascript中9 個(gè)常見(jiàn)錯(cuò)誤阻礙你進(jìn)步的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
微信小程序并沒(méi)有提供搖一搖API接口，但是提供了一個(gè)重力感應(yīng)的API，接下來(lái)我們可以用這個(gè)方法來(lái)模擬微信搖一搖功能，具體實(shí)現(xiàn)代碼，大家參考下本文2017-07-07
這篇文章主要介紹了JS小游戲之象棋暗棋源碼詳解,對(duì)游戲源碼進(jìn)行了較為詳細(xì)的分析,并附帶完整實(shí)例代碼供大家學(xué)習(xí)參考,需要的朋友可以參考下2014-09-09
這篇文章介紹了使用js復(fù)制鏈接中的部分文字的方法，技巧很實(shí)用，需要的朋友可以參考下2015-07-07
js實(shí)現(xiàn)點(diǎn)擊文本框顯示日期選擇器特效代碼分享
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊文本框顯示日期選擇器特效，提高了工作效率，推薦給大家，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11
js 獲取屏幕各種寬高的方法(瀏覽器兼容)，需要的朋友可以參考一下2013-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序排坑指南，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
js+html+css實(shí)現(xiàn)簡(jiǎn)單日歷效果
這篇文章主要為大家詳細(xì)介紹了js+html+css實(shí)現(xiàn)簡(jiǎn)單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06