在另一个 HTML 文件中包含一个 HTML 文件

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

在另一个 HTML 文件中包含一个 HTML 文件

作者：迹忆客最近更新：2023/03/27 浏览次数：

本文将介绍在 HTML 文件中包含 HTML 文件的方法。

使用 jQuery `load()` 方法在 HTML 文件中包含一个 HTML 文件

jQuery load() 方法允许我们从服务器加载数据。数据将显示在选定的容器中。我们可以使用 load() 方法在当前 HTML 文件中包含另一个 HTML 文件。load() 方法的语法如下。

.load(url, data, callback);

load() 方法将要加载的 URL 作为第一个参数。它还有另外两个参数，data 和 callback function，它们是可选的。参数 data 是处理请求时要发送到服务器的数据。如果 load() 方法完成，回调函数 将执行。

要运行 jQuery，我们需要在 HTML 的 script 标签中使用 jQuery CDN。例如，转到 CDN 并选择最新版本 jQuery 上的缩小选项。然后，复制代码并将其粘贴到 index.html 文件中。接下来，在 HTML 中创建一个 ID 为 anotherContent 的 div。然后，创建一个 p 标签并写入文本 This is from index.html。创建另一个名为 lake.html 的 HTML 文件并写一段 This is from lake.html。在 index.html 中，编写一个 jQuery 函数。选择 id anotherContent 并使用 lake.html 作为参数调用 load() 方法。

当我们运行文件 index.html 时，我们还可以看到文本 This is from lake.html。但是，我们应该从 HTTP 服务器运行文件 index.html。当我们使用本地 file 服务器在当前文件中包含另一个文件（在我们的例子中是 lake.html）时，跨域请求将被阻止。为了消除这个问题，我们可以从 index.html 文件的目录中使用以下 python 命令创建一个 HTTP 服务器。

python3 -m SimpleHTTPServer 1337

然后，我们可以从 http://localhost:1337 访问我们的网页。因此，我们可以使用 jQuery 在当前 HTML 文件中包含另一个 HTML 文件。

示例代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
 $(function(){
 $("#anotherContent").load("lake.html"); 
 });
</script>

<div id="anotherContent"></div>
<p>This is from index.html</p>

<p> This is from lake.html</p>

输出：

This is from lake.html
This is from index.html

使用 JavaScript 在 HTML 文件中包含 HTML 文件

我们可以使用 JavaScript 在 HTML 文件中包含 HTML。使用 jQuery 使用此方法的好处是我们不必加载任何使文件大小变小的 jQuery 文件。我们可以使用 JavaScript 中的模板文字来编写 HTML。我们可以通过在 HTML 文件中包含 JavaScript 文件并将 HTML 写入 JavaScript 文件来实现我们的目标。

例如，在 index.hmtl 文件中，使用 script 标签中的 src 属性链接 lake.js 文件。在正文部分，写入文本 This is from index.html。在 lake.js 文件中，使用 document.write() 编写 HTML。使用模板文字在方法中编写 HTML。换句话说，用反引号包裹 HTML 内容。在方法中写入 p 标记并写入文本 This is HTML from lake.js。

在输出部分，我们可以看到来自两个文件的文本。因此，我们可以使用 JavaScript 在 HTML 文件中包含 HTML。

示例代码：

<head> 
 <script src="lake.js "></script>
</head> 
<body> 
 <p>This is from index.html</p>
</body>

document.write(`
 <p>This is HTML from lake.js</p>
`);

输出：

This is HTML from lake.js
This is from index.html

上一篇：在 HTML 中设置长度验证

下一篇：将 JavaScript 文件链接到 HTML 文件

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享