html引入公共模块

2019-09-17 09:53:12来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

html引入公共模块

如果没有母版页,那么大量相同布局的页面会有很多相同的代码,那么这就提到了一个概念,叫重用性;
可以将相同布局的代码放在一个单独的文件,里面写一些公共模块,那么在其他页面只需要在指定位置引入他们就可以了
写一个头部,在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>

效果图:

 


原文链接:https://www.cnblogs.com/tenfly/p/11496233.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:谈谈你对HTML语义化的理解。

下一篇:前端开发CSS3——使用方式和选择器