如何在不依赖框架的情况下确定 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中文网其他相关文章！