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


在寫頁面的過程中,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就可以了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM