如何嵌套一个网页html到另一个html中

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在常规网页开发中（单页应用除外哈），经常会遇到把一些通用内容的页面集中到一个页面中，需要使用这些页面只需要包含引入即可，这样有利于维护和修改，当通用页面修改时只需更改一个文件就可以了，不需要每个文件单独处理。

例如：一个网站的页脚信息在每个网页都是一样的，把它命名为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的方式：

 <object style="border:0px" type="text/x-scriptlet" data="footer.htm" width=% height=>

 </object>

办公资源网址导航 https://www.wode007.com

3.js的实现方式：

一：jQuery有个load方法：

 <script>

       jQuery(document).ready(function() {

           $("#page").load("footer.html");

       });

 </script>

二：原生js实现：

 <div id="includefooter"></div>

 <script>

 function clientSideInclude(id, url) {

     var req = false;

     if(window.XMLHttpRequest) {// Safari, Firefox, 及其他非微软浏览器

         try {

             req = new XMLHttpRequest();

         }catch(e) {

             req = false;

         }

     }else if(window.ActiveXObject) {

         try {

             req = new ActiveXObject("Msxml2.XMLHTTP");// For Internet Explorer on Windows

         } catch(e) {

             try{

                 req= new ActiveXObject("Microsoft.XMLHTTP");

             } catch(e) {

                 req = false;

             }

         }

     }

     var element = document.getElementById(id);

     if(!element) {

         alert("函数clientSideInclude无法找到id " + id + "," +"你的网页中必须有一个含有这个id的div 或 span 标签。");

         return;

     }

     if(req) {

         req.open('GET', url, false);// 同步请求，等待收到全部内容

         req.send(null);

         element.innerHTML = req.responseText;

     } else {

         element.innerHTML =

             "对不起，你的浏览器不支持" +"XMLHTTPRequest 对象。这个网页的显示要求" +

             "Internet Explorer 5 以上版本, " +"或 Firefox 或 Safari 浏览器，也可能会有其他可兼容的浏览器存在。";

     }

 }

 clientSideInclude('includefooter', 'footer.html')

 </script>