前端开发过程中经常会遇到这样的问题,一个网站的头部侧边栏尾部固定,几乎每个页面都存在,,这时为了做到一次编写,多处使用的效果,我们就会想要去将这部分的代码放在单独的文件中,然后引用这个文件。分享几个楼主工作上遇到过的方法。
- 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" style="margin: 0; padding: 0;" frameborder="0" scrolling="no" src="head.html" height="auto" width="100%">iframe>
head.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"/>
head>
<body>
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Homea>li>
<li><a href="#">SVNa>li>
<li><a href="second.html">iOSa>li>
<li><a href="#">VB.Neta>li>
<li><a href="#">Javaa>li>
<li><a href="#">PHPa>li>
ul>
div>
<script src="js/jquery-1.10.1.min.js">script>
<script src="js/bootstrap.min.js">script>
body>
html>
index.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"/>
head>
<body>
<div><iframe src="head.html" frameborder="0" framespacing="0" width="100%" height="40" style="margin: 0; padding: 0;">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:expression(this.onFocus=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’>和
调用共同的网页头部或者网页底部,减少了每个页面都要编写头部或底部的复杂程度,而且方便修改,只要修改一个头部或者底部文件,所有页面的头部或者底部都随之改变,增加了工作效率。
比如: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\'>Homea>li>");
document.writeln(" <li><a href=\'index.html\'>SVNa>li>");
document.writeln(" <li><a href=\'second.html\'>iOSa>li>");
document.writeln(" <li><a href=\'#\'>VB.Neta>li>");
document.writeln(" <li><a href=\'#\'>Javaa>li>");
document.writeln(" <li><a href=\'#\'>PHPa>li>");
document.writeln(" ul>");
document.writeln(" div>");
<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"/>
head>
<body>
<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 :
document.getElementById("header").innerHTML = "....";
document.getElementById("footer").innerHTML = "....";
- jquery - load方法(内部ajax+html)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>把头部和尾部通过jquery加载进页面title>
<style>
body{text-align: center;}
style>
head>
<body>
<div id="header">div>
<div class="main" style="width:100%;padding:100px 0;background:#dcdcdc;">
<h1>我是主体h1>
div>
<div id="footer">div>
<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等模版引擎的模版继承方法,可以让你更容易的来复用模板。
xtemplate中文文档
layout.xtpl
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
header {
color: blue;
}
style>
head>
<body>
<header>
<h1>我是头部h1>
header>
{{{block ('zhanweifu')}}}
<footer>
<h1>我是底部h1>
footer>
body>
html>
index.xtpl
{{extend ('./layout')}}
{{#block ('zhanweifu')}}
<h1>这是首页面h1>
{{/block}}
cate.xtpl
{{extend ('./layout')}}
{{#block ('zhanweifu')}}
<h1>分类页contenth1>
{{/block}}