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

html引入js

admin
行业动态
2025-05-03
4943

HTML引入JS有3种方式：1. 行内式，如onclick=function(); 2. 内嵌式，…; 3. 外链式，

HTML引入JavaScript的基本方式

内联脚本（直接在HTML中编写）

将 <script> 标签直接放在 HTML 的 <head> 或 <body> 中，编写 JavaScript 代码。

html引入js 第1张

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

外部脚本（链接外部.js文件）

将 JavaScript 代码单独保存为 .js 文件，通过 <script> 标签的 src 属性引入。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">外部脚本示例</title>
    <script src="main.js"></script> <!-引入外部脚本 -->
</head>
<body>
    <h1>这是一个HTML页面</h1>
</body>
</html>

`<script>` 标签的关键属性

属性	说明
`src`	指定外部 JavaScript 文件路径（仅用于外部脚本）
`defer`	延迟执行脚本，直到HTML文档完全解析后再执行（按顺序执行）
`async`	异步执行脚本，不保证执行顺序（加载完立即执行）
`type`	定义脚本类型（默认为 `text/javascript`，可省略）
`crossorigin`	处理跨域请求（如 `anonymous` 或指定域名）

脚本位置与执行时机

脚本位置	执行时机	推荐场景
`<head>` 中（无 `defer/async`）	HTML未完全加载时执行	可能阻塞页面渲染（不推荐）
`<head>` 中（`defer`）	HTML完全加载后按顺序执行	操作DOM元素的最佳选择
`<body>` 底部	HTML完全加载后执行	避免阻塞渲染，传统优化方式
`<body>` 中（无 `defer/async`）	立即执行（可能阻塞后续内容）	少量简单脚本（需注意性能）

异步与延迟加载的区别

特性	`defer`	`async`
执行顺序	按脚本出现顺序依次执行	不保证顺序，谁先加载完谁先执行
是否阻塞HTML解析	会阻塞，直到脚本下载完成	不阻塞，异步下载并执行
适用场景	依赖DOM的脚本	独立加载的脚本（如第三方库）

模块化脚本的引入（ES6+）

使用 `type="module"`

<script type="module" src="app.js"></script>

支持 import/export 语法
自动开启严格模式（Strict Mode）
需通过 HTTP/HTTPS 协议加载

动态导入（按需加载）

// 在JavaScript中动态加载模块
import('./utils.js')
  .then(module => {
    module.sayHello(); // 调用导入的函数
  })
  .catch(err => console.error(err));

常见问题与解决方案

脚本未生效的可能原因

现象	原因	解决方案
浏览器控制台报错	语法错误、路径错误、跨域限制	检查代码语法、确认文件路径、设置CORS
DOM元素未找到	脚本在DOM元素加载前执行（如放在`<head>`且未加`defer`）	将脚本移到`<body>`底部或添加`defer`
第三方库冲突	多个脚本使用相同全局变量或未正确封装作用域	使用模块化或命名空间

外部脚本加载失败的处理

<script src="https://example.com/lib.js" integrity="sha384-XXX" crossorigin="anonymous"></script>
<script>
  if (!window.Lib) {
    console.error('第三方库加载失败，请检查网络或路径！');
    // 回退方案：加载本地备用文件
    document.write('<script src="lib-fallback.js"></script>');
  }
</script>