📌  相关文章
📜  html 加载后运行脚本 - Html (1)

📅  最后修改于: 2023-12-03 15:15:40.720000             🧑  作者: Mango

HTML 加载后运行脚本 - HTML

在 HTML 中，我们可以使用 JavaScript 脚本来实现各种操作。但是，如果我们把 JavaScript 放在 HTML 文件的头部或者中间部分，脚本就会在文档加载之前就被执行了。

如果我们希望脚本在文档加载完之后再被执行，该怎么办呢？这就要使用到 HTML 加载后运行脚本的方法。

在 HTML 中加载脚本

在 HTML 中，我们可以使用 <script> 元素来加载 JavaScript 脚本。有两种方法可以在 HTML 中加载脚本：

  • 将脚本嵌入 HTML 文件中
  • 外部引入 JavaScript 文件
将脚本嵌入 HTML 文件中

将脚本嵌入 HTML 文件中的方式，就是在 <script> 标签中直接编写 JavaScript 脚本。例如：

<!DOCTYPE html>
<html>
<head>
    <title>将脚本嵌入 HTML 文件中</title>
    <script>
        function doSomething() {
            alert('Hello World!');
        }
    </script>
</head>
<body>
    <button onclick="doSomething()">Click Me</button>
</body>
</html>

在这个例子中，我们在 <head> 标签中添加了一个 <script> 元素，然后在其中编写了一个 doSomething() 函数。在 HTML 文件的正文部分，我们添加了一个按钮，当用户单击该按钮时，就会执行 doSomething() 函数。

注意，在将脚本嵌入 HTML 文件中的方式中，脚本会在文档加载过程中被立即执行。因此，如果我们想要在文档加载完之后再执行脚本，需要使用后面介绍的技巧。

外部引入 JavaScript 文件

外部引入 JavaScript 文件的方式，就是在 <script> 标签的 src 属性中指定 JavaScript 文件的 URL。例如：

<!DOCTYPE html>
<html>
<head>
    <title>外部引入 JavaScript 文件</title>
    <script src="scripts/myscript.js"></script>
</head>
<body>
    <button onclick="doSomething()">Click Me</button>
</body>
</html>

在这个例子中，我们在 <head> 标签中添加了一个 <script> 元素，并在其中使用 src 属性指定了要引入的 JavaScript 文件的 URL。该文件位于 scripts/myscript.js 目录下。在 HTML 文件的正文部分，我们添加了一个按钮，当用户单击该按钮时，会执行从外部引入的脚本中的 doSomething() 函数。

延迟加载脚本

通常情况下，浏览器会在下载 JavaScript 文件时暂停文档的解析和渲染，直到脚本下载并被执行完毕。在一些情况下，这样会导致页面加载速度变慢，用户体验不佳。为了解决这个问题，我们可以使用延迟加载脚本的方式。

延迟加载脚本的方式就是在 <script> 标签中添加 defer 属性。例如：

<!DOCTYPE html>
<html>
<head>
    <title>延迟加载脚本</title>
    <script src="scripts/myscript.js" defer></script>
</head>
<body>
    <button onclick="doSomething()">Click Me</button>
</body>
</html>

在这个例子中，我们在 <head> 标签中添加了一个 <script> 元素，并使用 defer 属性指定要延迟加载的脚本文件的 URL。在 HTML 文件的正文部分，我们添加了一个按钮，当用户单击该按钮时，会执行从外部引入的脚本中的 doSomething() 函数。

使用 defer 属性时，浏览器会在文档解析过程中并行下载 JavaScript 文件，并在文档解析完毕后按照顺序依次执行这些脚本。因此，defer 属性可以确保脚本在文档加载完之后再被执行。

需要注意的是，defer 属性只适用于外部引入的 JavaScript 文件，不适用于将脚本嵌入 HTML 文件中的方式。

在DOMContentLoaded事件中运行脚本

除了使用 defer 属性之外，我们还可以使用 DOMContentLoaed 事件来延迟脚本的运行。

DOMContentLoaded 事件是浏览器在加载 HTML 文件时触发的事件，它表示文档解析完毕，但是不包括图片、脚本和样式表等外部资源的加载完毕。我们可以在监听该事件的回调函数中执行 JavaScript 脚本，以确保脚本在文档加载完之后再被执行。

例如：

<!DOCTYPE html>
<html>
<head>
    <title>在DOMContentLoaded事件中运行脚本</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            doSomething();
        });
    </script>
</head>
<body>
    <button onclick="doSomething()">Click Me</button>
</body>
</html>

在这个例子中，我们在 <head> 标签中添加了一个 <script> 元素，在其中监听了 DOMContentLoaded 事件，并在回调函数中调用了 doSomething() 函数。在 HTML 文件的正文部分，我们添加了一个按钮，当用户单击该按钮时，会执行从外部引入的脚本中的 doSomething() 函数。

使用 DOMContentLoaded 事件的方式，同样可以确保脚本在文档加载完之后再被执行。

总结

在 HTML 中加载 JavaScript 脚本的方式有两种：将脚本嵌入 HTML 文件中，或者外部引入 JavaScript 文件。为了确保脚本在文档加载完之后再被执行，我们可以使用 defer 属性或者监听 DOMContentLoaded 事件。使用 DOMContentLoaded 事件可以确保脚本在加载完之后再被执行，但是需要编写额外的 JavaScript 代码。使用 defer 属性可以简化代码，但是只适用于外部引入的 JavaScript 文件。