如何将一个html文件包含到另一个文件中？答案

【问题标题】：How to include a html file into another?如何将一个html文件包含到另一个文件中？
【发布时间】：2017-04-06 15:59:35
【问题描述】：

我比较新，所以我可能做得不对，但我已经尝试过了。我得到的最接近的是我包含的代码。它工作了一段时间，但模态不会“触发”。我试图弥补这一点，却失去了我的包容性。就这样吧。

HTML

<!--============================================-->
<!--    End of Main Program, Modals Follow  -->
<!--============================================-->
<section id="activeModal">
     <!--> placeholder for every modal in this project </!-->
     <!--> each modal is stored in a separate file (modals.html) </!-->
     <!--> main.js builds an include with a js script, appends it here, and it executes (hopefully) </!-->
</section><!-- /activeModal -->

// event listener for modals

$("button").on('click', function() {
    for ( i=0; i<this.attributes.length ;i++ ) {                     //  this - identifies the modal sought
        if ( this.attributes[i].name === "data-target" ) {
            var target = this.attributes[i].value;                  //  get the modal to "fire" (data-target attribute)
        };
    };
    modalId = "modals/"+target.substring(1, target.length)+".html";                        //  strip the '#' from target
    $("#activeModal").empty();                                                     //  remove any previous modal information
    includeHTML = '<!--#include virtual="'+modalId+'" -->';         //  include via ssi (server side include)
    $("#activeModal").append(includeHTML);                             //  append the 'import' html
    $(target).modal("show");                                                        //  show the modal
});

我希望大约 20 个模态中的任何一个的 html 会出现在 index.html 的 activeModal <section> 中。然后，我遇到了让它们“着火”的问题。

【问题讨论】：

标签： javascript jquery html apache

【解决方案1】：

根据这一行，当单击按钮时，您似乎正在尝试在客户端使用服务器端包含。

includeHTML = '<!--#include virtual="'+modalId+'" -->';         //  include via ssi (server side include)

这简直是不可能的。

您不能使用客户端代码触发服务器端包含。必须在将响应发送到客户端之前进行服务器端包含。要从服务器获取更多数据，您必须发起另一个请求，可能是通过 AJAX。

【讨论】：

【解决方案2】：

var stackoverflowResponse = document.createElement("div");
stackoverflowResponse.innerHTML = "Look in the console for the answear";
document.body.replacewith(stackoverflowResponse);

【讨论】：

【解决方案3】：

您可以尝试将 index.html 的扩展名更改为 .shtml，然后使用 Server Side Includes 包含另一个文件的内容。

<!--#include file="included.html" -->

当我这样做时，我还认为我必须更新 .htaccess 文件才能将 .shtml 识别为索引文件：

AddType text/html .shtml
AddHandler server-parsed .shtml
AddHandler server-parsed .shtml .html
AddHandler server-parsed .shtml .htm

【讨论】：

【解决方案4】：

你可以用 jquery 试试这样的东西：

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

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

【讨论】：

我想我在一次失败的尝试中尝试过这个。不过我会再试一次。谢谢。