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

html包含js

HTML通过标签嵌入或引用外部JS文件

HTML中引入JavaScript的方式

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

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">内联脚本示例</title>
</head>
<body>
  <h1>内联脚本演示</h1>
  <script>
    // 直接在HTML中编写JS代码
    document.addEventListener('DOMContentLoaded', () => {
      alert('页面加载完成！');
    });
  </script>
</body>
</html>

内部脚本（在<head>中集中定义）

将 JavaScript 代码统一放在 <head> 中的 <script> 标签内。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">内部脚本示例</title>
  <script>
    // 在head中定义JS函数
    function showMessage() {
      alert('调用内部脚本函数！');
    }
  </script>
</head>
<body>
  <h1>内部脚本演示</h1>
  <button onclick="showMessage()">点击触发</button>
</body>
</html>

外部脚本（链接独立JS文件）

通过 <script src="路径"> 引入外部 JavaScript 文件。

html包含js 第1张

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">外部脚本示例</title>
  <script src="script.js"></script> <!-引入外部JS文件 -->
</head>
<body>
  <h1>外部脚本演示</h1>
  <button id="btn">点击触发</button>
</body>
</html>

外部文件 script.js

// 外部JS文件内容 document.getElementById('btn').addEventListener('click', () => { alert('外部脚本响应！'); });

脚本加载顺序与执行时机对比表

方式 加载时机 是否阻塞渲染 适用场景
内联脚本 遇到标签立即加载 是 简单交互、少量代码
内部脚本 遇到标签立即加载 是 页面级初始化、函数定义
外部脚本 下载完成后加载 是 复用代码、分离逻辑
defer 属性 DOM加载后执行 否 操作DOM元素、避免阻塞
async 属性 下载完成立即执行 否 无依赖的并行加载脚本

现代最佳实践建议

  1. 优先使用外部脚本：提高代码复用性,便于维护。
  2. 添加 defer 或 async：
    • 对需要操作DOM的脚本使用 defer,确保DOM加载完成后执行。
    • 对无依赖的第三方脚本（如分析工具）使用 async。
  3. 模块化开发：使用 ES6 模块 (import/export) 或打包工具（如 Webpack）管理复杂逻辑。

常见问题与解答

问题1：如何让脚本在页面完全加载后执行？

解答：
使用 defer 属性或监听 DOMContentLoaded 事件。

<script src="script.js" defer></script>

或在脚本中手动监听：

document.addEventListener('DOMContentLoaded', () => { // 页面加载完成后的逻辑 });

问题2：外部脚本未生效的可能原因有哪些？

解答：

  1. 路径错误：检查 src 属性是否指向正确文件路径。
  2. 网络问题：外部脚本未成功下载（可检查浏览器控制台）。
  3. 加载顺序：脚本依赖的DOM元素未加载完成（需添加 defer）。
  4. 语法错误：外部脚本存在报错，导致后续代码未

原创文章，作者：未希，如若转载，请注明出处：https://www.xixizhuji.com/ask/1789646.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。

HTML JavaScript
0

相关文章