如何在不依賴框架的情況下確定 DOM 準備？

Document.isReady：DOM 就緒偵測的本機解決方案

依賴Prototype 和jQuery 等框架來管理window.onload 事件可能不會總是令人嚮往。本文探討了確定 DOM 就緒情況的替代方法，特別是透過使用 document.isReady。

查詢 Document.isReady

對於具有穩定事件 API 的現代瀏覽器， DOMContentLoaded 事件提供了處理 DOM 就緒事件的強大方法。像下面這樣的實作提供了一個簡單而有效率的解決方案：

<code class="javascript">function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

jQuery 的$.isReady 屬性

jQuery 提供了一個未記錄的屬性$.isReady，它反映了DOM 內部就緒狀態。利用此屬性可以進行簡潔的檢查：

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

值得注意的是，此屬性仍未記錄在案，並且無法保證其在未來 jQuery 版本中的可用性。謹慎使用它，並為升級時可能發生的變化做好準備。

自訂 DOM 就緒程式碼段

為了更廣泛的瀏覽器相容性，可以使用自訂 DOM 就緒程式碼片段。受到Dustin Diaz 方法的啟發，它使用正則表達式檢查document.readyState：

<code class="javascript">if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}</code>

此方法依賴於「in」子字串存在於「loading」和「interactive」ready 中的事實狀態但不是“完整”狀態。

以上是如何在不依賴框架的情況下確定 DOM 準備？的詳細內容。更多資訊請關注PHP中文網其他相關文章！