• 豌豆资源网
  • 开引网企业服务
  • 服务外包网
  • 如何嵌套一个网页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的方式:

    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需要启动一个本地服务,同时需要同域名下访问才行。

     

    posted @ 2020-06-05 17:07  前端一点红  阅读(8108)  评论(0编辑  收藏  举报
  • 乐游资源网
  • 热爱资源网
  • 灵活用工代发薪平台
  • 企服知识
  • 355软件知识