总结页⾯公共部分引⼊的⼏种办法
前⾔
前端开发过程中经常会遇到这样的问题，⼀个⽹站的头部侧边栏尾部固定，⼏乎每个页⾯都存在，，这时为了做到⼀次编写，多处使⽤的效果，我们就会想要去将这部分的代码放在单独的⽂件中，然后引⽤这个⽂件。分享⼏个楼主⼯作上遇到过的⽅法。
- PHP/ASP.NET——include
⾸先制作⼀个头部⽂件head.asp，或者⼀个底部⽂件foot.asp。如主页是index.asp，调⽤头部代码是在index.asp⽂件代码的开始位置
（第⼀个标记后⾯，标记前⾯）增加如下代码：
<!– #include file=”head.asp” –>
调⽤共⽤底部⽂件代码是在index.asp⽂件代码的结束位置（最后⼀个标记前⾯）增加如下代码：
<!– #include file=”foot.asp” –>
如果是PHP⽂件，⽂件名改为 footer.php即可。
- iFrame
<iframe marginwidth="0"marginheight="0"frameborder="0"scrolling="no"src="head.html"height="auto"width="100%" head.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet"type="text/css"href="css/bootstrap.min.css"/>
<link rel="stylesheet"type="text/css"href="css/index.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="second.html">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
index.html
网站底部代码js特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet"type="text/css"href="css/bootstrap.min.css"/>
<link rel="stylesheet"type="text/css"href="css/index.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div><iframe src="head.html"frameborder="0"framespacing="0"width="100%"height="40"></iframe></div>
<div class="container clearfix">
<div class="pull-left hih400 bluebg">左边</div>
<div class="pull-right hih400 greybg">右边</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
index.css只设置了全局样式及为了区分的背景⾊
index.css
html,body{height: 100%;}
body{ margin: 0; padding: 0; font-family:"Microsoft Yahei",Arial,sans-serif; /*background: #f4f4f4;*/ }
table,td,tr,th{ font-size: 12px; }
ol,ul{ list-style: none; }
li{ list-style-type: none; }
address,cite,code,em,th,i{ font-weight: normal; font-style: normal; }
.
hx a,.hx em,.fB{ font-weight: bold; }
a{outline:none;blr:Focus=this.blur());}
a:focus{outline: none;}
.hih400{height: 400px;width: 50%;}
.bluebg{background: lightskyblue;}
.greybg{background: honeydew;}
iFrame的⽅式缺点在于页⾯结构的杂乱、不易被搜索引擎搜索、导航链接等等问题，因此，⼤家普遍寻其他的替代⽅法。
- js - document.writeln
制作⼀个共⽤头部⽂件head.js和⼀个共⽤底部⽂件foot.js。如主页⽂件是index.htm，调⽤头部和底部⽂件的⽅法是：<script src=’head.js’>和<script src=’foot.js’>
调⽤共同的⽹页头部或者⽹页底部，减少了每个页⾯都要编写头部或底部的复杂程度，⽽且⽅便修改，
只要修改⼀个头部或者底部⽂件，所有页⾯的头部或者底部都随之改变，增加了⼯作效率。
⽐如：head.js⽂件——根据上⾯的head.html，利⽤转换⼯具：
document.writeln("<div class=\'container\'>");
document.writeln(" <ul class=\'nav nav-pills nav-justified\'>");
document.writeln(" <li class=\'active\'><a href=\'index.html\'>Home</a></li>");
document.writeln(" <li><a href=\'index.html\'>SVN</a></li>");
document.writeln(" <li><a href=\'second.html\'>iOS</a></li>");
document.writeln(" <li><a href=\'#\'>VB.Net</a></li>");
document.writeln(" <li><a href=\'#\'>Java</a></li>");
document.writeln(" <li><a href=\'#\'>PHP</a></li>");
document.writeln(" </ul>");
document.writeln(" </div>");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet"type="text/css"href="css/bootstrap.min.css"/>
<link rel="stylesheet"type="text/css"href="css/index.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]-->
</head>
<body>
<!--此处引⽤head.jd-->
<script src="js/head.js"></script>
<div class="container clearfix">
<div class="pull-left hih400 bluebg">左边</div>
<div class="pull-right hih400 greybg">右边</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
亲测此⽅法较上⾯的⽅法来说更为可靠，页⾯未出现多余的空⽩等，且⽀持到IE8
唯⼀缺陷：⽆法实现，当前页⾯导航点亮，当前页⾯导航加active或者on等样式，继续寻有⽆更好⽅法
- js - ajax
⽤ JavaScript 填充內容，所有的页⾯都有：
<div id="header"></div>
<div id="footer"></div>
<script type="text/javascript" src="loader.js">
loader.js ：
- jquery - load⽅法(内部ajax+html)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>把头部和尾部通过jquery加载进页⾯</title>
<style>
body{text-align: center;}
</style>
</head>
<body>
<!--放⼀个id为header的div，把header.html加载到这块-->
<div id="header"></div>
<div class="main">
<h1>我是主体</h1>
</div>
<!--放⼀个id为footer的div，把footer.html加载到这块-->
<div id="footer"></div>
<!--利⽤jquery的load()⽅法把header.html和footer.html加载进来 -->
<script type="text/javascript"src="../js/jquery-1.11.0.min.js" ></script>
<script>
$(function() {
$('#header').load('common/header.html');
$('#footer').load('common/footer.html');
})
</script>
</body>
</html>
- 模板继承
利⽤xtemplate等模版引擎的模版继承⽅法，可以让你更容易的来复⽤模板。 pl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header {
color: blue;
}
</style>
</head>
<body>
<header>
<h1>我是头部</h1>
</header>
{{{block ('zhanweifu')}}}
<footer>
<h1>我是底部</h1>
</footer>
</body>
</html>
{{#block ('zhanweifu')}}
<h1>这是⾸页⾯</h1>
{{/block}}
{{extend ('./layout')}}
{{#block ('zhanweifu')}}
<h1>分类页content</h1>
{{/block}}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论