HTML页面引入公共的头部、底部、模块
2019-03-18 本文已影响0人
东方晓
网页公共的部分很多，如果每个页面都要写或者修改，太麻烦，百度后，有两种方案，一是iframe，是之前比较常用的，但总觉得iframe不太好用，最后找到另一种，jq的load方法。
1、先写好公共部分的文件，可以把样式写在<head>中间的<style>标签里面，如果需要操作DOM，也要在该页面写好。
不要在模版页引入公用的CSS或者JavaScript文件，这样会出现重复的样式和事件。
2、在需要引入公共文件的页面：
- 引入JQuery库
- 引入公共模板
<!-- header -->
<div class="header"></div>
<!-- header over-->
<div class="main"></div>
<!--footer-->
<div class="footer"></div>
<!--footer over-->
<script>
// 导入公共模板
$(function(){
$(".header").load("header.html");
$(".footer").load("footer.html");
});
</script>
