有趣的瀏覽器活躍窗口監聽

wuaiqiu 發布于2019-08-19 18:05 / 2249人閱讀

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

2016-04-11

有趣的瀏覽器活躍窗口監聽 window.onblur & window.onfocus

在瀏覽器中，有這樣兩個事件監聽 window.onblur & window.onfocus，
分別表示的是窗口失去焦點和窗口處于活躍狀態，什么意思呢？

即在你瀏覽其他窗口頁面、或是瀏覽器最小化、又或是點擊了其他程序等等，都算是瀏覽器窗口失去焦點，那么 window.onblur 事件就會觸發。
同樣的，當你回到該窗口瀏覽網頁，該窗口就處于活躍狀態，相應的 window.onfocus 事件也會觸發。

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

讓網頁標題變得有趣

首先來我的博客感受一下吧，地址：安生博客，
打開網頁之后，點擊其他窗口，然后再次回到安生博客，期間請注意網頁標題的變化，是不是很好玩。
沒錯，玩的就是心機，讓你不看我的博客哈哈。

代碼實現

代碼非常地簡單，以致于你不得不感嘆世界真的很奇妙。
接下來將是一段愉悅的時光，因為馬上我就要把我的全世界擺在你的面前了。

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

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

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

云服務器 GPU云服務器安卓窗口瀏覽器監聽瀏覽器標簽關閉有趣的事有趣的python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79174.html

【前端詞典】分享 8 個有趣且實用的 API

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

baiy 2019-05-23 16:26 評論0 收藏0
【前端詞典】分享 8 個有趣且實用的 API

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

duan199226 2019-08-02 15:22 評論0 收藏0
【前端詞典】分享 8 個有趣且實用的 API

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

Enlightenment 2019-08-23 18:16 評論0 收藏0
獨立開發變現周刊（第26期）：短鏈瀏覽器插件，從1個想法到35萬活躍用戶

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

rainyang 2021-11-04 16:06 評論0 收藏0
一些有趣的web 標簽屬性/API

摘要：內容安全策略描述相當于的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為，中的內容其實就是各個參數的變量值。可以通過屬性取得。標簽 Img標簽屬性 crossorigin 值： anonymous use-credentials 應用場景 crossorigin：這個枚舉屬性表明是否必須使用 CORS 完成相關圖像的抓取， HTM...

468122151 2019-08-23 15:35 評論0 收藏0