如何在 HTML 文件中包含另一个 HTML 文件？

在本教程中，我们将学习在 HTML 文件中包含另一个 HTML 文件。

有多种方法可用于在 HTML 文件中包含另一个 HTML 文件。让我们快速浏览一下在网络上支持的技术。

使用 JQuery 加载来包含 HTML 文件

在本节中，我们将检查如何使用 JQuery 的加载方法来包含 HTML 文件。

用户可以按照以下语法使用此方法。

语法

$(wrapper).load(htmlfile);

包装器附加 jQuery 加载的新 HTML 文件。

参数

• wrapper − 包含新 HTML 内容的 DOM 元素的 ID。

• htmlfile − 新的 HTML 文件名。

例

该程序需要两个 HTML 文件。一个是用于加载新 HTML 文件的主 HTML 文件。接下来是新的 HTML 文件。将两个文件放在确切的位置。

在主 HTML 文件中定义一个包装器 DOM 元素以追加新的 HTML 文件。使用 jQuery 加载技术加载新的 HTML 文件并将其设置在包装器 DOM 中。

内部 HTML 文件

This is an HTML page from same directory

主网页文件

Program to include another HTML file in this HTML using JQuery load

输出

使用 w3-include-html 属性包含 HTML 文件

在本节中，让我们检查如何使用 w3-include-html 属性来包含 HTML 文件。

用户可以按照以下语法使用此方法。

语法

包括一个包装器 DOM，其属性为 w3-include-html，具有新的 HTML 文件名作为值。

//Read the attribute fileName = domEl.getAttribute("w3-include-html"); //Make XMLHttpRequest with the attribute value xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { //If the request is successful, load the new HTML. Else throw 404 error and try again if (this.readyState == 4) { if (this.status == 200) {domEl.innerHTML = this.responseText;} if (this.status == 404) {domEl.innerHTML = "Error 404";} /* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); } xmlHttp.open("GET", fileName, true); xmlHttp.send();

语法读取 w3-include-html 属性值，并使用 XMLHttpRequest 加载新的 HTML。

例

在此示例中，创建一个新的 HTML 和一个默认的 HTML 文件。默认 HTML 文件包含一个属性为 w3-include-html 的 div 元素，该元素包含新的 HTML 文件名。

程序读取 w3-include-html 属性值，使用文件名生成 XMLHttp请求，然后加载文件。

成功加载文件后，一个新的 HTML 文件将在 w3-include-html 包装器 DOM 中呈现。否则用户收到错误消息，程序再次加载文件。

内部 HTML 文件

HTML 2 HEADER

HTML 2 FOOTER

主网页文件

Program to include another HTML file in this HTML using w3-include-html

输出

使用 htmlinclude 库包含 HTML 文件

在本节中，我们将检查如何使用 htmlinclude 库来包含 HTML 文件。

用户可以按照以下语法使用此方法。

语法

语法添加 JavaScript 库文件 URL。

包含标记 src 包含新的 HTML 文件名。

//Getting include attribute value let includes = document.getElementsByTagName('include'); for(var i=0; i response.text()).then(text => callback(text)); }

语法使用 fetch 方法加载标记“include”的源。

例

在此示例中，htmlinclude 库在标头中可用。使用新文件名作为 src 属性值创建包含标记。

进入脚本，使用 fetch 方法加载包含标记 src 值。如果您在使用 fetch 时遇到任何错误，请尝试从 nodejs 或任何其他程序 IDE 获取帮助。

内部 HTML 文件

htmlinclude library included this HTML file

主网页文件

Program to include another HTML file in this HTML using htmlinclude library

输出

使用 iframe 包含 HTML 文件

在本节中，让我们检查如何使用 iframe 来包含 HTML 文件。

用户可以按照以下语法使用此方法。

语法

iframe 标记在 src 中包含新的 HTML 文件名。

例

在此示例中，创建一个要包含的示例 HTML 文件和主 HTML 文件。该方法在新的 HTML 正文中添加一个具有新 HTML 文件名的 iframe 作为源值。

iframe 将新的 HTML 内容加载到主 HTML 文件中。

内部 HTML 文件

iframe included this HTML file

主网页文件

Program to include another HTML file in this HTML using iframe

输出

本教程介绍了四种在 HTML 文件中包含新 HTML 文件的方法。iframe 方法易于实现。如果用户需要 jQuery 方法，可以选择 jQuery 加载方法。