html页面页面打开的时候加载js代码的方式

在 HTML 页面刚打开时调用 JavaScript 代码，有几种常见的方法：

内联脚本：在 HTML 页面的 <script> 标签中直接嵌入 JavaScript 代码。将你的 JavaScript 代码放置在 <script> 标签内，放置在 <head> 或 <body> 标签内都可以。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script>
    // 在这里编写你的 JavaScript 代码
    console.log("Hello, World!");
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

外部脚本：将 JavaScript 代码保存在一个独立的外部文件中，然后通过 <script> 标签的 src 属性引入该文件。在 HTML 页面中使用 <script> 标签，并设置 src 属性为外部 JavaScript 文件的路径。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在上述示例中，script.js 是包含你的 JavaScript 代码的外部文件。

DOMContentLoaded 事件：使用 JavaScript 监听 DOMContentLoaded 事件，该事件在 HTML 文档加载和解析完成时触发。在事件处理函数中编写你的 JavaScript 代码。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // 在这里编写你的 JavaScript 代码
      console.log("Hello, World!");
    });
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在上述示例中，当 HTML 文档加载和解析完成后，DOMContentLoaded 事件将触发，并执行事件处理函数中的 JavaScript 代码。

这些方法可以根据你的需求选择其中一种来调用 JavaScript 代码，具体取决于你希望在页面加载时执行的代码逻辑和代码的复杂性。

posted on 2023-11-03 22:06 jarsing 阅读(1929) 评论(0) 收藏举报