在没有 JQuery 的情况下加载 HTML 正文后调用 JavaScript 脚本的最佳方法？答案

【问题标题】：Best way to call a JavaScript script after the HTML body loads with no JQuery?在没有 JQuery 的情况下加载 HTML 正文后调用 JavaScript 脚本的最佳方法？
【发布时间】：2023-03-09 16:50:01
【问题描述】：

我有一个有点大的 .js 文件，当前在 HTML 页面的页眉中调用它，但它无法执行，因为在调用脚本时元素尚未加载。实现这一点的最佳方法是什么？我试过添加

 document.addEventListener("DOMContentLoaded", load, false);

脚本，但这似乎不起作用。在页脚或内联中调用脚本不是一种选择，JQuery 也不是。

【问题讨论】：

你试过window.onload吗？
我听说过，但我不知道如何实现它。我想加载整个 .js 文件，而不仅仅是调用特定函数，因为它需要事件处理程序才能运行。我可能会误解它是如何工作的。这是我第一次尝试在页面头部使用 JavaScript，我之前只使用过内联调用。
试试window.onload=function(){//Now create and append the script tag.}之类的东西你可以用这样的东西来创建脚本标签...var tag = document.createElement('script'); tag.src = "www.example.com/myscript.js"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
我应该把它放在我的 .js 或 .html 文件中的什么位置？
在您的.html 文件中...您要将javascript链接到的那个。

标签： javascript html events dom

【解决方案1】：

认识onload。

加载事件在文档加载过程结束时触发。至此，文档中的所有对象都在 DOM 中，所有图片、脚本、链接和子框架都加载完毕。

还有 Gecko 特定的 DOM 事件，例如 DOMContentLoaded 和 DOMFrameContentLoaded（可以使用 EventTarget.addEventListener()) 在 DOM 之后触发页面已构建，但不等待其他资源完成加载。

【讨论】：

我不确定我是否完全理解如何使用它。在示例中没有引用 .js 文件。
这取决于您在加载事件中尝试执行的操作。 DOMContentLoaded 只等待 HTML 完成写入。 onload 等待所有资源（图片、脚本等）先下载。
我想我希望触发 load() 函数，以便初始化我的事件处理程序，但我也有变量引用页面中显然没有找到这些元素的元素。跨度>
当我尝试初始化我的事件处理程序时，Chrome 的检查仍然出现错误，说它引用了 null。
查看示例部分。您可以直接拨打window.onload = load。