首页  >  文章  >  web前端  >  是否有其他方法可以在不使用框架的情况下检查 Javascript 中的 DOM 就绪情况?

是否有其他方法可以在不使用框架的情况下检查 Javascript 中的 DOM 就绪情况?

Barbara Streisand
Barbara Streisand原创
2024-10-20 10:23:301085浏览

Is There an Alternative Way to Check for DOM Readiness in Javascript Without Using Frameworks?

确定 Javascript 中的文档准备情况

问题:

是否有其他方法来检查在 Javascript 中实现 DOM 就绪,而不依赖于原型或 jQuery 等框架?

答案:

选项 1:DOMContentLoaded 事件

当初始 HTML 文档已被解析且 DOM 已准备好进行操作时,将触发 DOMContentLoaded 事件。要使用此事件:

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

请注意,此事件仅在页面加载时触发一次。

选项 2:jQuery 的 isReady 属性(未记录)

jQuery 有一个名为 isReady 的未记录属性,可用于检查 DOM 准备情况:

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

虽然此属性可靠,但并不可靠正式记录,可能会在未来的 jQuery 版本中删除。

选项 3:自定义 ReadyState 检查

受 Dustin Diaz 的启发,您可以创建一个自定义 DOM 就绪代码片段来检查document.readyState 属性:

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

这是有效的,因为 document.readyState 属性会经历三种加载状态:“正在加载”、“交互”和“完全的”。 “Loading”和“interactive”都包含文本“in”,表示 DOM 尚未准备好。

以上是是否有其他方法可以在不使用框架的情况下检查 Javascript 中的 DOM 就绪情况?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn