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>

 

效果圖：