如何在一个html文件里包含或引用另一个html文件

时间:2017-11-03
在php中,我们可以使用include或require引入文件,那么如何在html文件中包含其他html文件,本文章向大家介绍二种html文件中包含其他html文件的方法,需要的朋友可以参考一下。

如何在一个html文件里包含或引用另一个html文件,本文章介绍二种方法。

第一种方法:jquery方法

jquery代码:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

html代码:

<div data-include="header"></div>
<div data-include="footer"></div>

以上代码实现了将views/header.html 和 views/footer.html包含加载到当前html文件中。

第二种方法:jquery load方法

a.html

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

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

b.html:

<p>This is my include file</p>

以上代码将b.html文件包含到a.html