如何向一个html中嵌入另一个html文件

时间：2024-04-17 16:58:04

在写页面的过程中，header，footer等部分需要重复复用，比如导航栏等，这个时候如果我们将这些需要复用的部分写进一个文件里边，然后在需要的时候引用，那么自然事半功倍，

angularjs 或是jsp中都有很好的标签用来引用外部文件，而html没有，但是可以借助一些方式来进行引用。

[1 angularjs 文件引用]:

[头部文件引用]

1 <head>
2     <% include configHead.ejs %>
3     <title>后台管理</title>
4 </head>

[尾部或中部文件引用]

 1 <% include homeFooter.ejs %> 

[jsp文件引用]

1 <%@ include file="文件名" %>//(等于是将两个jsp合并为一个jsp)或
2 <jsp：include page="文件名">//(相当于将两个jsp执行后的内容合并成一个页面)

[2 html文件引用]：

[1] js方法，引入 homeHeader.html 和 homeFooter.html,div使用class引用

 1 <script type="text/javascript">
 2  
 3         $(document).ready(function () {
 4  
 5             $(\'.configHead\').load(\'homeHeader.html\');
 6  
 7             $(\'.configFoot\').load(\'homeFooter.html\');
 8  
 9         });
10  
11     </script>
12  
13 </head>
14  
15 <body>
16  
17 <header>
18  
19  <div class="configHead">

[2-iframe 引入]

 1 <iframe name="" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="100%" height="170" src="homeFooter.html"></iframe> 

[3-css引入]

可以在css定义某个class，将所需要添加的东西负载上去，之后引用该class就可以了

相关文章