頁面狀態改變會觸發的一些事件

Monine發表於2019-03-04
事件

原文地址：github.com/Monine/stud…

按照頁面載入、切換、關閉三個動作講解頁面狀態改變會觸發的一些事件

載入頁面

  1. 文件解析完成觸發 readystatechange 事件，document.readyState === `interactive`，接著立即觸發 DOMContentLoaded 事件。

    以上兩個事件是相同的，表示同一個意思，文件已經完成載入，文件已被解析，但是諸如影像，樣式表和框架之類的子資源仍在載入。唯一的不同點在於所有瀏覽器都支援 readystatechange 事件，IE8 及以下不支援 DOMContentLoaded 事件。

  2. 所有依賴資源載入完畢觸發 readystatechange 事件，document.readyState === `complete`，接著立即觸發 load 事件。

    以上兩個事件也是相同的，表示同一個意思，文件和所有依賴資源都已載入完成。

  3. 觸發 pageshow 事件

    此事件除了在 load 事件觸發後初始化頁面時觸發之外，當一條會話歷史記錄被執行的時候也將會觸此事件（包括 後退 / 前進 按鈕操作）。

頁面可見狀態切換

當使用者最小化網頁或者瀏覽到其他標籤的網頁時，API 將傳送一個關於當前頁面的可見資訊的事件 visibilitychange，對應的狀態標識是 document.visibilityState。

常見使用場景如視訊或音樂播放頁面，當使用者改變當前頁面可見狀態時，自動開啟或暫停播放。

詳細參考：Page Visibility API

關閉頁面

  1. 頁面關閉之前觸發 beforeunload 事件

    當瀏覽器視窗關閉或者重新整理時，會觸發 beforeunload 事件。當前頁面不會直接關閉，可以點選確定按鈕關閉或重新整理，也可以取消關閉或重新整理（取消預設行為）。

    如果處理函式的 event 物件的 returnValue 屬性賦值非空字串，瀏覽器會彈出一個對話方塊，來詢問使用者是否確定要離開當前頁面。有些瀏覽器會將返回的字串展示在彈框裡，但有些其他瀏覽器只展示它們自定義的資訊。沒有賦值時，該事件不做任何響應。

    需要注意的是，為了避免不必要的彈窗，如果頁面並沒有發生互動瀏覽器可能不會展示在 beforeunload 事件中引發的彈框，甚至可能即使發生互動了也直接不顯示。

  2. 觸發 pagehide 事件

    與 pageshow 事件大同小異，在 beforeunload 事件之後 unload 事件之前觸發，同樣在會話歷史記錄被執行的時候也將會觸此事件（包括 後退 / 前進 按鈕操作）。

  3. 頁面被解除安裝時觸發 unload 事件

    當文件或一個子資源（iframe）正在被解除安裝時，觸發 unload事件，父 iframe 會在子 iframe 解除安裝之前解除安裝。

    詳細參考：unload

還有更多其它事件嗎？

相關文章