如何在不使用 JavaScript 库的情况下检查 DOM 的 HTML 组件何时加载？

Question

我想检测<body>元素何时完成从外部脚本加载到 DOM 中而不使用外部 JavaScript 库。 我不想使用document.ready或window.onload因为它们在整个 DOM（包括所有外部文件）完成加载之前不会触发。

Answer 1

对于现代浏览器使用

window.addEventListener('DOMContentLoaded', function() {
    // dom is ready
}, false);

对于 IE8 使用

window.onload = function() {
    // dom is ready
};

Answer 2

为什么不将脚本放在结束正文标记的正上方

<body>
..
....

....
<script type="text/javascript".....
</script>
</body>

这可以确保所有内容都已加载

回应评论

将此代码放在文档的开头

对于 IE8 和更早版本的 IE

window.onload= function() {
var script=document.createElement("script");
script.src=url;            // here use the url of the script
document.body.appendChild(script);
};

为他人

window.attachEventListener("DOMContentLoaded",function() {
    var script=document.createElement("script");
    script.src=url;            // here use the url of the script
    document.body.appendChild(script);
    },false);

Answer 3

这是一个适用于所有浏览器的简单解决方案：

在 HTML 中的</body>标记上方插入以下代码：

 <script type="text/javascript"> try { ONLOAD() } catch(e) { ONLOADq=1 } </script> MINIFIED: <script type="text/javascript">try{ONLOAD()}catch(e){ONLOADq=1}</script>

将此代码插入外部 javascript：

 if ( typeof ONLOADq === 'number') { ONLOAD() };

将需要在页面加载时运行的外部 javscript 中的所有代码放入名为ONLOAD的 function 中。 例如：
```
 function ONLOAD() { document.body.appendChild(ST1) };
```

第一部分涵盖外部 javascript 在 HTML 之前完成加载的实例，第二部分则反之亦然。

如何在不使用 JavaScript 库的情况下检查 DOM 的 HTML 组件何时加载？

问题描述

3 个解决方案

解决方案1
0 2011-07-28 21:46:59

解决方案2
0 2011-07-28 21:47:29

解决方案3
0 已采纳 2011-07-29 23:58:23

如何在不使用 JavaScript 库的情况下检查 DOM 的 HTML 组件何时加载？

问题描述

3 个解决方案

解决方案1 0 2011-07-28 21:46:59

解决方案2 0 2011-07-28 21:47:29

解决方案3 0 已采纳 2011-07-29 23:58:23

解决方案1
0 2011-07-28 21:46:59

解决方案2
0 2011-07-28 21:47:29

解决方案3
0 已采纳 2011-07-29 23:58:23