将外部 JavaScript 文件嵌入 HTML 的方法-js教程-PHP中文网

将外部 JavaScript 文件嵌入 HTML 的方法

碧海醫心

发布： 2025-07-30 15:32:15

原创

876人浏览过

将外部 javascript 文件嵌入 html 的方法

本文介绍了一种将外部 JavaScript 文件嵌入到 HTML 文件中的方法，以便生成独立的 HTML 文件。通过使用 m4 宏处理器，可以方便地将 JavaScript 文件的内容直接插入到 HTML 文件的 <script> 标签中，从而实现代码的模块化和便捷部署。本文提供详细的步骤和示例代码，帮助开发者快速掌握该技术。

使用 m4 宏处理器嵌入 JavaScript 文件

在开发 Web 项目时，为了代码的模块化和可维护性，通常会将 JavaScript 代码放在单独的文件中，然后在 HTML 文件中使用 <script> 标签的 src 属性引入。然而，在某些情况下，例如需要生成独立的 HTML 文件时，就需要将这些外部 JavaScript 文件嵌入到 HTML 文件中。

一种简单有效的方法是使用 m4 宏处理器。m4 是一个通用的宏处理器，它可以将文本文件中的宏展开，并将结果输出到另一个文本文件。我们可以利用 m4 将 JavaScript 文件的内容插入到 HTML 文件的 <script> 标签中。

步骤

准备 HTML 文件

立即学习“Java免费学习笔记（深入）”；

首先，需要准备一个包含 <script> 标签的 HTML 文件，该标签的 src 属性指向要嵌入的 JavaScript 文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <script id="custom" src="test.js"></script>
</body>
</html>

登录后复制

准备 JavaScript 文件

准备一个简单的 JavaScript 文件，例如：
```
alert("hello");
```
登录后复制
修改 HTML 文件以使用 m4 指令

修改 HTML 文件，将 <script> 标签的内容替换为 m4 指令，指示 m4 将 JavaScript 文件的内容插入到该位置。为了避免与 HTML 语法冲突，可以使用 changequote 指令修改 m4 的引用符号。
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <script id="custom">
    changequote(, )
    include(test.js)
  </script>
</body>
</html>
```
登录后复制
将该文件保存为 input.html.preprocessed。
运行 m4 命令

FashionLabs
AI服装模特、商品图，可商用，低价提升销量神器

38

查看详情

在命令行中运行以下命令，使用 m4 处理 HTML 文件：
```
m4 input.html.preprocessed > output.html
```
登录后复制
该命令会将 input.html.preprocessed 文件中的 m4 指令展开，并将结果输出到 output.html 文件中。

查看输出结果

打开 output.html 文件，可以看到 JavaScript 文件的内容已经嵌入到 <script> 标签中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <script id="custom">

    alert("hello");

  </script>
</body>
</html>

登录后复制

嵌入多个 JavaScript 文件

如果需要嵌入多个 JavaScript 文件，可以使用 include 指令多次包含不同的文件。例如，假设有两个 JavaScript 文件 test1.js 和 test2.js：

test1.js:

alert("hello from test1");

登录后复制

test2.js:

alert("hello from test2");

登录后复制

可以修改 HTML 文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <script id="custom">
    changequote(, )
    include(test1.js)
    include(test2.js)
  </script>
</body>
</html>

登录后复制

运行 m4 命令后，output.html 文件将包含两个 JavaScript 文件的内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <script id="custom">

    alert("hello from test1");


    alert("hello from test2");

  </script>
</body>
</html>

登录后复制

注意事项

确保已经安装了 m4 宏处理器。在 Linux 系统中，可以使用 apt-get install m4 或 yum install m4 命令安装。在 macOS 系统中，可以使用 brew install m4 命令安装。
changequote(, ) 指令用于修改 m4 的引用符号，避免与 HTML 语法冲突。可以根据实际情况选择不同的引用符号。
如果 JavaScript 文件中包含 m4 的保留字，可能会导致解析错误。可以使用 undefine 指令取消定义这些保留字。
如果需要保持原始 HTML 文件的可运行性，可以使用 sed 命令或其他文本处理工具，在运行 m4 命令之前，将 m4 指令添加到 HTML 文件中。