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

How do I check when the HTML component of the DOM has loaded without using a JavaScript library?

本文关键字：HTML DOM 检查 组件 何时 加载 情况下 JavaScript      更新时间：2023-09-26

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

对于现代浏览器使用

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

对于IE8使用

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

为什么不把脚本放在结束body标签的正上方

<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);

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

  1. 在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>

  2. 在外部javascript中插入以下代码:

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

  3. 将需要在页面加载时运行的外部javascript中的所有代码放入一个名为ONLOAD的函数中。例如:

    function ONLOAD() { document.body.appendChild(ST1) };

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

相关文章：