在 html 文件中包含 html 文件

📌 相关文章

📜 在 html 文件中包含 html 文件 - Html (1)

📅 最后修改于: 2023-12-03 14:50:56.230000 🧑 作者: Mango

有时，我们会遇到在一个 HTML 文件中需要包含另一个 HTML 文件的情况。这个需求可能是因为我们想将一些重复的 HTML 代码放在一个单独的文件中，然后在多个页面中引用它，或者是因为我们想将一个大型的 HTML 文件拆分成多个小文件来方便管理。

那么，如何在 HTML 文件中包含 HTML 文件呢？下面介绍两种方法。

1. 使用 iframe 标签

使用 iframe 标签可以将一个 HTML 文件嵌入到另一个 HTML 文件中。示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>HTML 文件包含示例 - iframe 标签</title>
</head>
<body>
	<iframe src="included.html" frameborder="0" width="100%" height="500"></iframe>
</body>
</html>

在上面的代码中，我们在 body 标签中插入了一个 iframe 标签，并将 src 属性设置为要嵌入的 HTML 文件的路径（假设要嵌入的文件名为 included.html）。设置 frameborder="0" 可以去除 iframe 边框，而将宽度和高度设置为100%和500px可使嵌入的 HTML 文件占满整个页面高度。

2. 使用 jQuery 的 load 方法

如果我们想将一个 HTML 文件的内容插入到另一个 HTML 文件的某个元素中，可以使用 jQuery 的 load 方法。示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>HTML 文件包含示例 - jQuery load 方法</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
		$(document).ready(function() {
			$("#includedContent").load("included.html");
		});
	</script>
</head>
<body>
	<div id="includedContent"></div>
</body>
</html>

在上面的代码中，我们在 head 标签中引入了 jQuery 库，并使用 load 方法将 included.html 文件中的内容加载到 id 为 includedContent 的 div 标签中。这里的 $ 符号是 jQuery 的简写，而 $(document).ready() 则是一种常用的 jQuery 语法，用于在页面加载后执行指定的函数。

以上是两种在 HTML 文件中包含 HTML 文件的方法。需要注意的是，iframe 方式可以包含完整的 HTML 文件，包括 head 和 body 标签，而 load 方法则只能加载 body 中的内容。另外，在使用 iframe 标签时，要注意被嵌入的 HTML 文件的路径必须相对于当前 HTML 文件的路径。