Question

我正在使用Bootstrap建立网站，并且我必须在每个页面上使用相同的模式。现在我必须将整个代码复制到每个html中，然后它才能在每个页面上使用，但这并不是理想的处理方式，因此我想如果有人建议我不必复制每个文件都使用相同的html代码。我想要一种方法，使相同的html代码可用于所有页面，而仅将其保存在一个位置。我无法在此处发布代码，但我会尽力告诉您我的问题。

<!-- navbar for website -->
1 html code
<!-- sign in and login modal(buttons are on navbar) -->
2 html code
<!-- main body -->
3 html code
4 html code
5 html code
<!-- footer for website -->
6 html code
7 html code

例如，根据上面的块导航栏，模态和页脚（1、2、6、7行）对于每个页面都保持不变。我该如何将所有内容放到其他地方，然后以某种方式链接它，就像css文件被链接（之类）一样。我可以给您更多信息，只需在注释中询问（而不是我的确切代码）即可。

Answer 1

有两种方法可以实现您的目标：

使用Java语言

<script>
function includeModal() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      } 
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>

然后称呼它

<script>
   includeModal();
</script>

使用HTML

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

Answer 2

首先，您需要分割html，例如仅为Footer创建另一个文件，例如Footer.html和header.html等。

然后使用JQuery包含它们。

<html> 
 <head> 
  <script src="jquery.js"></script> 
   <script> 
     $(function(){
      $("#includedContent").load("header.html"); 
      });
   </script> 
  </head> 
   <body> 
    <div id="includedContent"></div>
  </body> 
 </html>

jQuery .load（）文档为here

仅在一个地方保持模态（引导程序）

2 个答案: