在常規網頁開發中（單頁應用除外哈），經常會遇到把一些通用內容的頁面集中到一個頁面中，需要使用這些頁面只需要包含引入即可，這樣有利於維護和修改，當通用頁面修改時只需更改一個文件就可以了，不需要每個文件單獨處理。
例如：一個網站的頁腳信息在每個網頁都是一樣的，把它命名為footer.html文件，在其他頁面都包含它就可以了，在不使用php,jsp等動態語言的情況下，只通過客戶端嵌套的辦法：js和iframe/object的方式。
1.iframe的引入：
<iframe name="footer" marginwidth=0 marginheight=0 width=100% height=50 src="tooter.htm" frameborder=0> </iframe>
2.object的方式：
1 <object style="border:0px" type="text/x-scriptlet" data="footer.htm" width=100% height=50> 2 </object>
辦公資源網址導航 https://www.wode007.com
3.js的實現方式：
一：jQuery有個load方法：
1 <script> 2 jQuery(document).ready(function() { 3 $("#page").load("footer.html"); 4 }); 5 </script>
二：原生js實現：
1 <div id="includefooter"></div> 2 <script> 3 function clientSideInclude(id, url) { 4 var req = false; 5 if(window.XMLHttpRequest) {// Safari, Firefox, 及其他非微軟瀏覽器 6 try { 7 req = new XMLHttpRequest(); 8 }catch(e) { 9 req = false; 10 } 11 }else if(window.ActiveXObject) { 12 try { 13 req = new ActiveXObject("Msxml2.XMLHTTP");// For Internet Explorer on Windows 14 } catch(e) { 15 try{ 16 req= new ActiveXObject("Microsoft.XMLHTTP"); 17 } catch(e) { 18 req = false; 19 } 20 } 21 } 22 var element = document.getElementById(id); 23 if(!element) { 24 alert("函數clientSideInclude無法找到id " + id + "," +"你的網頁中必須有一個含有這個id的div 或 span 標簽。"); 25 return; 26 } 27 if(req) { 28 req.open('GET', url, false);// 同步請求，等待收到全部內容 29 req.send(null); 30 element.innerHTML = req.responseText; 31 } else { 32 element.innerHTML = 33 "對不起，你的瀏覽器不支持" +"XMLHTTPRequest 對象。這個網頁的顯示要求" + 34 "Internet Explorer 5 以上版本, " +"或 Firefox 或 Safari 瀏覽器，也可能會有其他可兼容的瀏覽器存在。"; 35 } 36 } 37 clientSideInclude('includefooter', 'footer.html') 38 </script>
說明：使用js需要啟動一個本地服務，同時需要同域名下訪問才行。