有趣的瀏覽器活躍窗口監(jiān)聽

wuaiqiu 發(fā)布于2019-08-19 18:05 / 2298人閱讀

摘要：有趣的瀏覽器活躍窗口監(jiān)聽在瀏覽器中，有這樣兩個(gè)事件監(jiān)聽，分別表示的是窗口失去焦點(diǎn)和窗口處于活躍狀態(tài)，什么意思呢即在你瀏覽其他窗口頁面或是瀏覽器最小化又或是點(diǎn)擊了其他程序等等，都算是瀏覽器窗口失去焦點(diǎn)，那么事件就會(huì)觸發(fā)。

2016-04-11

有趣的瀏覽器活躍窗口監(jiān)聽 window.onblur & window.onfocus

在瀏覽器中，有這樣兩個(gè)事件監(jiān)聽 window.onblur & window.onfocus，
分別表示的是窗口失去焦點(diǎn)和窗口處于活躍狀態(tài)，什么意思呢？

即在你瀏覽其他窗口頁面、或是瀏覽器最小化、又或是點(diǎn)擊了其他程序等等，都算是瀏覽器窗口失去焦點(diǎn)，那么 window.onblur 事件就會(huì)觸發(fā)。
同樣的，當(dāng)你回到該窗口瀏覽網(wǎng)頁，該窗口就處于活躍狀態(tài)，相應(yīng)的 window.onfocus 事件也會(huì)觸發(fā)。

那么我們可以利用這兩個(gè)事件做哪些有趣的東西呢？

讓網(wǎng)頁標(biāo)題變得有趣

首先來我的博客感受一下吧，地址：安生博客，
打開網(wǎng)頁之后，點(diǎn)擊其他窗口，然后再次回到安生博客，期間請(qǐng)注意網(wǎng)頁標(biāo)題的變化，是不是很好玩。
沒錯(cuò)，玩的就是心機(jī)，讓你不看我的博客哈哈。

代碼實(shí)現(xiàn)

代碼非常地簡單，以致于你不得不感嘆世界真的很奇妙。
接下來將是一段愉悅的時(shí)光，因?yàn)轳R上我就要把我的全世界擺在你的面前了。

(function () {
  var title = document.title
  window.onblur = function () {
    document.title = "網(wǎng)頁崩潰了，快看！"
  }

  window.onfocus = function () {
    document.title = title
  }
})()

將以上代碼放在你的html文件中即可。

GPU云服務(wù)器云服務(wù)器安卓窗口瀏覽器監(jiān)聽瀏覽器標(biāo)簽關(guān)閉有趣的事有趣的python

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79174.html

相關(guān)文章

【前端詞典】分享 8 個(gè)有趣且實(shí)用的 API

摘要：使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個(gè)可以使你所打開的頁面全屏展示，沒有其他頁面外的內(nèi)容展示在屏幕上。如果你想加群交流，你也可以添加我的微信。前言在日常開發(fā)中總是和各種 API 打交道，我們名為前端工程師實(shí)為 API 調(diào)用工程師。這篇文章我就分享 8 個(gè)有趣的 API，你若通過閱讀這篇文章對(duì)前端增加一點(diǎn)點(diǎn)的樂趣，對(duì)我來說也是一種鼓勵(lì)。這幾...

baiy 2019-05-23 16:26 評(píng)論0 收藏0
【前端詞典】分享 8 個(gè)有趣且實(shí)用的 API

摘要：前言在日常開發(fā)中總是和各種打交道，我們名為前端工程師實(shí)為調(diào)用工程師。使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個(gè)可以使你所打開的頁面全屏展示，沒有其他頁面外的內(nèi)容展示在屏幕上。前言在日常開發(fā)中總是和各種 API 打交道，我們名為前端工程師實(shí)為 API 調(diào)用工程師。這篇文章我就分享 8 個(gè)有趣的 API，你若通過閱讀這篇文章對(duì)前端增加一點(diǎn)點(diǎn)的樂...

duan199226 2019-08-02 15:22 評(píng)論0 收藏0
【前端詞典】分享 8 個(gè)有趣且實(shí)用的 API

摘要：前言在日常開發(fā)中總是和各種打交道，我們名為前端工程師實(shí)為調(diào)用工程師。使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個(gè)可以使你所打開的頁面全屏展示，沒有其他頁面外的內(nèi)容展示在屏幕上。前言在日常開發(fā)中總是和各種 API 打交道，我們名為前端工程師實(shí)為 API 調(diào)用工程師。這篇文章我就分享 8 個(gè)有趣的 API，你若通過閱讀這篇文章對(duì)前端增加一點(diǎn)點(diǎn)的樂...

Enlightenment 2019-08-23 18:16 評(píng)論0 收藏0
獨(dú)立開發(fā)變現(xiàn)周刊（第26期）：短鏈瀏覽器插件，從1個(gè)想法到35萬活躍用戶

摘要：在我的案例中，我看到谷歌正在扼殺他們的短鏈接服務(wù)，而最流行的縮短器擴(kuò)展是使用谷歌的縮短器，并且有超過萬用戶。 Csaba經(jīng)驗(yàn)分享 2、Http Server Online：網(wǎng)頁版HTTP服務(wù) 今天看到一個(gè)思路很奇特的開源小項(xiàng)目，網(wǎng)頁版實(shí)現(xiàn)加載http服務(wù)。一般我們會(huì)啟動(dòng)一個(gè)http server來實(shí)現(xiàn)http的項(xiàng)目啟動(dòng)加載，有Node.js、Java、Python等等。通過...

rainyang 2021-11-04 16:06 評(píng)論0 收藏0
一些有趣的web 標(biāo)簽屬性/API

摘要：內(nèi)容安全策略描述相當(dāng)于的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對(duì)應(yīng)的屬性值為，中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值?？梢酝ㄟ^屬性取得。標(biāo)簽 Img標(biāo)簽屬性 crossorigin 值： anonymous use-credentials 應(yīng)用場景 crossorigin：這個(gè)枚舉屬性表明是否必須使用 CORS 完成相關(guān)圖像的抓取， HTM...

468122151 2019-08-23 15:35 評(píng)論0 收藏0