在常规网页开发中(单页应用除外哈),经常会遇到把一些通用内容的页面集中到一个页面中,需要使用这些页面只需要包含引入即可,这样有利于维护和修改,当通用页面修改时只需更改一个文件就可以了,不需要每个文件单独处理。
例如:一个网站的页脚信息在每个网页都是一样的,把它命名为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需要启动一个本地服务,同时需要同域名下访问才行。