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

很酷的站长

于 2022-12-12 13:26:06 发布

阅读量3.4k

点赞数 1

分类专栏：编程笔记文章标签： html 前端 javascript

原文链接：https://s.10zhan.com/art/88.html

版权

编程笔记专栏收录该内容

554 篇文章 21 订阅

订阅专栏

在本教程中，我们将学习在 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 文件

<html> <body> <h3>This is an HTML page from same directory</h3> </body> </html>

主网页文件

<html> <head> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { $("#includeHtml").load("result.html"); }); </script> </head> <body> <h2>Program to include another HTML file in this HTML using <i>JQuery load</i></h2> <div id="includeHtml"></div> </body> </html>

输出

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

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

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

语法

<div w3-include-html="filename.html"></div>

包括一个包装器 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> <body> <header><b>HTML 2 HEADER</b></header> <div style="height: 100px;"></div> <footer><b>HTML 2 FOOTER</b></footer> </body> </html>

主网页文件

<html> <body> <h2>Program to include another HTML file in this HTML using <i>w3-include-html</i></h2> <div w3-include-html="result.html"></div> <script> function addHTML() { var el, i, domEl, fileName, xmlHttp; /*Iterate all DOM*/ el = document.getElementsByTagName("*"); for (i = 0; i < el.length; i++) { domEl = el[i]; /*find the element having w3-include-html attribute*/ fileName = domEl.getAttribute("w3-include-html"); if (fileName) { /*http request with attribute value as file name*/ xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { domEl.innerHTML = this.responseText; } if (this.status == 404) { domEl.innerHTML = "Page not found."; } /* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); } } xmlHttp.open("GET", fileName, true); xmlHttp.send(); /*function ends*/ return; } } } addHTML(); </script> </body> </html>

输出

使用 htmlinclude 库包含 HTML 文件

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

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

语法

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

语法添加 JavaScript 库文件 URL。

<include src="./result.html"></include>

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

//Getting include attribute value let includes = document.getElementsByTagName('include'); for(var i=0; i<includes.length; i++){ let include = includes[i]; //Loading include src value load_file(includes[i].attributes.src.value, function(text){ include.insertAdjacentHTML('afterend', text); include.remove(); }); } function load_file(filename, callback) { fetch(filename).then(response => response.text()).then(text => callback(text)); }

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

例

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

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

内部 HTML 文件

<html> <body> <b>htmlinclude library included this HTML file</b> </body> </html>

主网页文件

<html> <head> <script src="https://unpkg.com/htmlincludejs"></script> </head> <body> <h2>Program to include another HTML file in this HTML using <i>htmlinclude library</i></h2> <include src="./result.html"></include> <script> let includes = document.getElementsByTagName('include'); for (var i = 0; i < includes.length; i++) { let include = includes[i]; load_file(includes[i].attributes.src.value, function(text) { include.insertAdjacentHTML('afterend', text); include.remove(); }); } function load_file(filename, callback) { fetch(filename).then(response => response.text()).then(text => callback(text)); } </script> </body> </html>

输出

使用 iframe 包含 HTML 文件

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

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

语法

<iframe src="new.html"></iframe>

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

例

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

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

内部 HTML 文件

<html> <body> <div style="background-color: skyblue;">iframe included this HTML file</div> </body> </html>

主网页文件

<html> <head> <h2>Program to include another HTML file in this HTML using <i>iframe</i></h2> <style> iframe[iframetag] { border: none; } </style> </head> <body> <div id="iframeDiv"> <iframe src="result.html" iframetag></iframe> </div> </body> </html>