在网页加载后执行 JavaScript 代码
-
在 JavaScript 中的
body标签末尾添加script标签 -
在 JavaScript 中使用
onload事件 -
在 JavaScript 中的
body标签上使用onload事件 -
在 JavaScript 文件中的
window对象上使用onload事件
在执行任何 JavaScript 代码之前，我们始终必须确保首先在浏览器上呈现所有 HTML 元素。由于我们将在 JavaScript 代码中引用这些 HTML 元素，因此需要在网页之前加载这些元素。
在 head 标签内编写 script 标签不是一个好主意（这仅在你将第三方脚本加载到代码中时才有意义），因为 HTML 文档是从上到下执行的，而 head 标签是出现在 body 标签之前。因此，它将首先执行，然后是 body 标签。
由于我们所有的网页内容都存在于 body 标签内，而 body 标切换现在 head 标签之后，因此不需要在 head 内添加 JavaScript 代码，因为它将无法找到 HTML 元素。请注意，到目前为止，尚未创建元素。
在所有网页的内容完全呈现在屏幕上之后，有多种方法可以加载 JavaScript。以下是一些众所周知的方法，你可以在网页完全加载后按照这些方法执行 JavaScript 代码。
在 JavaScript 中的 body 标签末尾添加 script 标签
在 body 标签的末尾添加一个 script 标签是加载 JavaScript 代码的常用方法。至此，网页的所有内容都在屏幕上正确呈现。因此，我们可以轻松地在 JavaScript 代码中找到或引用这些 HTML 元素，而不会在此过程中遇到任何错误。
下面的程序显示了它是如何完成的。
<body>
<script></script>
</body>
在 JavaScript 中使用 onload 事件
在页面加载后执行 JavaScript 的另一种方法是使用 onload 方法。onload 方法等待页面加载完毕。一旦这样做，这个过程就会执行 JavaScript 代码。
有两种编写 JavaScript 代码的方法。一种方法是在 body 标签下方的 script 标签内编写 JavaScript 代码，然后调用 onload 方法内的函数。你还可以创建一个单独的文件来编写 JavaScript 代码，在 body 标签末尾的 HTML 中链接该文件，然后在 onload 方法内调用该函数。
在 JavaScript 中的 body 标签上使用 onload 事件
onload 方法需要一个 target 变量。在这种情况下，我们将在 body 标签上使用 onload 方法，使其成为 target。
在 onload 方法中，我们只需要传入一个函数。现在，这个函数只有在网页的所有内容都完全加载后才会执行。
<body onload="myFunction()">
<h1>This is an example of onload.</h1>
<script>
function myFunction() {
console.log("function called...");
}
</script>
</body>
输出：
function called...
在 body 标签中，我们只有一个 h1 标签和一个 script 标签。在 script 标签中，我们有一个 myFunction() 函数，它向 function called... 控制台窗口打印一条消息。要在页面加载后执行此函数，我们只需将其传递到 onload 方法中。
在 JavaScript 文件中的 window 对象上使用 onload 事件
使用 onload 方法的另一种方法是在 window 对象上。window 对象代表整个浏览器窗口。在浏览器窗口中的元素完全执行后，我们可以使用 onload 方法执行我们的 JavaScript 代码。
<body>
<h1>This is an example of onload.</h1>
<script>
window.onload = function () {
console.log("function called...");
}
</script>
</body>
在这里，我们有与上一个相同的代码。这里唯一的区别是我们在 window 对象上使用了 onload 方法，该对象现在是目标。程序最终将调用该函数，并在控制台窗口上打印消息函数调用...。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn