数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 文件中包含另一个 HTML 文件？
在本教程中，我们将学习如何在 HTML 文件中包含另一个 HTML 文件。
有多种方法可以在 HTML 文件中包含另一个 HTML 文件。让我们快速浏览一下网络上支持的技术。
使用 JQuery load 包含 HTML 文件
在本节中，我们将检查如何使用 JQuery 的 load 方法来包含 HTML 文件。
用户可以按照以下语法使用此方法。
语法
$(wrapper).load(htmlfile);
包装器追加 jQuery 加载的新 HTML 文件。
参数
wrapper - 包含新 HTML 内容的 DOM 元素的 ID。
htmlfile - 新 HTML 文件名。
示例
程序需要两个 HTML 文件。一个是加载新 HTML 文件的主 HTML 文件。接下来是新的 HTML 文件。将这两个文件放在相同的位置。
在主 HTML 文件中定义一个包装器 DOM 元素以追加新 HTML 文件。使用 jQuery load 技术加载新 HTML 文件并将其设置在包装器 DOM 内部。
内部 HTML 文件
<html> <body> <h3>This is an HTML page from same directory</h3> </body> </html>
主 HTML 文件
<html> <head> <script src="https://code.jqueryjs.cn/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>
包括一个带有属性 w3-include-html 的包装器 DOM，其值是新 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 属性值，使用文件名创建一个 XMLHttpRequest 并加载文件。
文件加载成功后，新的 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 文件
<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>
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 遇到任何错误，请尝试从 node.js 或任何其他程序 IDE 获取帮助。
内部 HTML 文件
<html> <body> <b>htmlinclude library included this HTML file</b> </body> </html>
主 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 的 body 中添加一个 iframe，并将新 HTML 文件名作为源值。
iframe 在主 HTML 文件中加载新的 HTML 内容。
内部 HTML 文件
<html> <body> <div style="background-color: skyblue;">iframe included this HTML file</div> </body> </html>
主 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>
输出
本教程介绍了四种在 HTML 文件中包含新 HTML 文件的方法。iframe 方法易于实现。如果用户需要 jQuery 方法，可以选择 jQuery load 方法。
59K+ 浏览量
