如何在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加载技术加载新的HTML文件并将其设置在包装器DOM元素内。

内部HTML文件

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

主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>

输出

如何在HTML文件中包含另一个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>

输出

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

使用htmlinclude库包含HTML文件

在本节中，我们将学习如何使用htmlinclude库来包含一个HTML文件。

用户可以按照以下的语法使用这个方法。

语法

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

语法向HTML文件添加了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>

输出

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

使用 iframe 包含一个 HTML 文件

在这一部分中，让我们看看如何使用 iframe 来包含一个 HTML 文件。

用户可以按照下面的语法来使用这种方法。

语法

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

通过在src中包含新的HTML文件名，iframe标签将其包含在内。

示例

在这个示例中，创建一个示例HTML文件，以包含和主HTML文件。该方法在新的HTML主体中添加一个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>