html引入公共资源文件,html引入公共模块

2023-05-16

html引入公共模块

如果没有母版页,那么大量相同布局的页面会有很多相同的代码,那么这就提到了一个概念,叫重用性;

可以将相同布局的代码放在一个单独的文件,里面写一些公共模块,那么在其他页面只需要在指定位置引入他们就可以了

写一个头部,在top.html写入(只写的需要添加的):

这是头部

在center.html写入:

这是中间文本

在index里,需要放置模块的位置放一个容器,然后再ready完成后加载进去:

/*用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")

})

test

效果图:

5ed3af0dc2cdd7e120083e94cd61e812.png

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html引入公共资源文件,html引入公共模块 的相关文章

随机推荐