总结页面公共部分引入的几种办法

前言

前端开发过程中经常会遇到这样的问题,一个网站的头部侧边栏尾部固定,几乎每个页面都存在,,这时为了做到一次编写,多处使用的效果,我们就会想要去将这部分的代码放在单独的文件中,然后引用这个文件。分享几个楼主工作上遇到过的方法。

- 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’>
                    
                    

你可能感兴趣的:(javascript,html)