2016-11-22 145 views
-1

我比较新,所以我可能没有做到他们的权利,但我已经尝试过。我得到的最接近的是我包含的代码。这是一段时间的工作,但模式不会“开火”。我试图补救,并失去了我的包容。所以在这里。如何将html文件包含到另一个文件中?

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

JS

// 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出现在activeModal的index.html<section>。然后,我有让他们“火”的问题。

回答

1

基于这一行,看起来您尝试在单击按钮时在客户端使用服务器端包含。

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

这是非常不可能的。

您无法用客户端代码触发服务器端包含。服务器端包含必须在响应发送给客户端之前完成。要从服务器获取更多数据,您必须通过AJAX启动另一个请求。

+0

新人的错误,但我认为你是对的。 – doug5solas

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

你可以试着改变你的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 
0

那么你可以尝试这样的使用jquery :

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

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

我想我尝试了这种尝试。我会再试一次。谢谢。 – doug5solas

相关问题