当前位置：首页 > 行业动态 > 正文

html里引入js

admin
行业动态
2025-04-26
2281

内嵌代码；；三种方式引入

HTML中引入JavaScript的三种方式

内联脚本（直接嵌入HTML）

将JS代码直接写入<script>标签内部，通常放在<head>或<body>标签内。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">内联脚本示例</title>
  <script>
    // 直接在HTML中编写JS代码
    alert("欢迎访问我的网页！");
  </script>
</head>
<body>
  <h1>这是一个测试页面</h1>
</body>
</html>

内部脚本（在`<head>`或`<body>`中定义）

将JS代码集中在<script>标签内，但与HTML内容分离,通常用于页面级逻辑。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">内部脚本示例</title>
  <script src="main.js"></script> <!-外部脚本引用 -->
  <script>
    // 页面初始化逻辑
    document.addEventListener("DOMContentLoaded", function() {
      console.log("DOM已加载完成");
    });
  </script>
</head>
<body>
  <h1>动态内容示例</h1>
  <div id="content"></div>
  <script>
    // 操作DOM元素
    document.getElementById("content").innerHTML = "<p>这是通过JS插入的内容</p>";
  </script>
</body>
</html>

外部脚本（独立JS文件）

将JS代码保存为.js文件，通过<script src="路径">引入,推荐用于复用代码。

<!-index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">外部脚本示例</title>
  <script src="utils.js"></script> <!-引入工具函数库 -->
  <script src="main.js"></script>   <!-引入主逻辑脚本 -->
</head>
<body>
  <h1>模块化开发示例</h1>
</body>
</html>

// utils.js
function showMessage(msg) {
  alert(msg);
}
// main.js
showMessage("外部脚本加载成功！");

关键属性与性能优化

属性	作用	适用场景
`async`	异步加载脚本，不阻塞页面解析，加载完立即执行	适用于无依赖的第三方脚本（如广告、分析工具）
`defer`	延迟执行脚本，等待页面解析完成后按顺序执行	适用于需要操作DOM的脚本，避免覆盖内联脚本
`type`	指定脚本类型（默认`text/javascript`）	可用于加载非JS模块（如`module`、`importmap`等）
`crossorigin`	跨域请求配置（如`anonymous`、`use-credentials`）	当JS文件部署在不同域名时，解决浏览器跨域限制

示例：使用defer优化加载顺序

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">defer属性示例</title>
  <script src="main.js" defer></script>
</head>
<body>
  <h1>延迟脚本执行示例</h1>
  <script>
    console.log("内联脚本先执行"); // 先于defer脚本输出
  </script>
</body>
</html>

// main.js
console.log("外部defer脚本后执行"); // 最后输出

常见问题与解决方案

问题	原因分析	解决方案
脚本未执行	路径错误导致文件未找到未关闭`</script>`标签导致语法错误	检查`src`路径是否正确确保标签闭合使用开发者工具查看网络请求状态
阻塞页面渲染	内联/同步脚本过多，导致HTML解析暂停	将关键脚本设为`defer` 使用`async`加载非必要脚本减少内联代码体积
跨域脚本被阻止	浏览器安全策略限制不同域的JS文件加载	添加`crossorigin="anonymous"`属性配置服务器允许跨域资源共享（CORS）