首页 > Web开发 > 详细

html引入公共模块

时间:2019-09-10 11:34:07      阅读:78      评论:0      收藏:0      [点我收藏+]

如果没有母版页,那么大量相同布局的页面会有很多相同的代码,那么这就提到了一个概念,叫重用性;
可以将相同布局的代码放在一个单独的文件,里面写一些公共模块,那么在其他页面只需要在指定位置引入他们就可以了
写一个头部,在top.html写入(只写的需要添加的):
<div style="width: 100%;height: 100px;background: green;text-align: center;line-height: 100px;">
  这是头部
</div>
在center.html写入:
<div style="width: 80%;margin: 0 auto;text-align: center;border: 1px solid;">
  这是中间文本
</div>
在index里,需要放置模块的位置放一个容器,然后再ready完成后加载进去:
<script>
/*用jq来写最方便
$(document).ready(function(){
  $("#head").load("top.html")
  $("#center").load("center.html")
});*/

// 也可以用原生js来实现ready
function ready(fn){
  if(document.addEventListener){
    //标准浏览器
    document.addEventListener(‘DOMContentLoaded‘,function(){

      document.removeEventListener(‘DOMContentLoaded‘,arguments.callee,false); //注销事件,避免反复触发

      fn();//执行函数
    },false);
  }
  else if(document.attachEvent){
    //IE浏览器
    document.attachEvent(‘onreadystatechange‘,function(){
      if(document.readyState==‘complete‘){
        document.detachEvent(‘onreadystatechange‘,arguments.callee);
        fn();
      }
    });
  }
}
// 在这里调用ready
ready(function(){
  $("#head").load("top.html")
  $("#center").load("center.html")
})
</script>
<div id="head"></div>
<div style="text-align: center;padding: 20px;">
  test
</div>
<div id="center"></div>

效果图:

技术分享图片

 

html引入公共模块

原文:https://www.cnblogs.com/tenfly/p/11496233.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!