script语言共用头部尾部

最新推荐文章于 2022-03-03 00:12:31 发布

lily2016n

最新推荐文章于 2022-03-03 00:12:31 发布

阅读量459

点赞数 3

分类专栏：学习 js 文章标签：前端优化

本文链接：https://blog.csdn.net/lily2016n/article/details/53378015

版权

js 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

学习

7 篇文章 0 订阅

订阅专栏

*制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:调用共同的网页头部或者网页底部，减少了每个页面都要编写头部或底部的复杂程度，而且方便修改，只要修改一个头部或者底部文件，所有页面的头部或者底部都随之改变，增加了工作效率。
**head.js文件——根据上面的head.html，利用转换工具：http://tool.chinaz.com/Tools/Html_Js.aspx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>head</title>
</head>
<body>
<div class="top">
    <div class="top-con clearfix">
        <div class="container">
            <div class="logo col-xs-3">
                <img src="image/logo.png" alt="" title="">
            </div>
            <div class="dropdown visible-xs pull-right">
                <button class="btn btn-default" data-toggle="dropdown">
                    <span><img src="image/nav_ico.png" width="22" height="18" alt="" title=""></span>
                    导航栏
                </button>
                <ul class="dropdown-menu  text-center list-inline">
                    <li><a href="index.html" style="color: #086194">首页</a></li>
                    <li><a href="service.html"> 服务</a></li>
                    <li><a href="programme.html">方案</a></li>
                    <li><a href="news.html"> 资讯</a></li>
                    <li><a href="about.html"> 关于</a></li>
                    <li><a href="#">论坛</a></li>
                </ul>
            </div>
            <div class="col-sm-9 hidden-xs">
                <ul class="list-unstyled list-inline text-right ">
                    <li><a href="index.html" style="color: red;border-bottom: 2px solid red">首页</a></li>
                    <li><a href="service.html">服务</a></li>
                    <li><a href="programme.html">方案</a></li>
                    <li><a href="news.html">资讯</a></li>
                    <li><a href="about.html">关于</a></li>
                    <li><a href="#">论坛</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-----------------以上是头部内容------------>
</body>
</html>

压缩成下面

document.writeln("<!DOCTYPE html>");
document.writeln("<html lang=\'en\'>");
document.writeln("<head>");
document.writeln("    <meta charset=\'UTF-8\'>");
document.writeln("    <title>head</title>");
document.writeln("</head>");
document.writeln("<body>");
document.writeln("<div class=\'top\'>");
document.writeln("    <div class=\'top-con clearfix\'>");
document.writeln("        <div class=\'container\'>");
document.writeln("            <div class=\'logo col-xs-3\'>");
document.writeln("                <img src=\'image/logo.png\' alt=\'\' title=\'\'>");
document.writeln("            </div>");
document.writeln("            <div class=\'dropdown visible-xs pull-right\'>");
document.writeln("                <button class=\'btn btn-default\' data-toggle=\'dropdown\'>");
document.writeln("                    <span><img src=\'image/nav_ico.png\' width=\'22\' height=\'18\' alt=\'\' title=\'\'></span>");
document.writeln("                    导航栏");
document.writeln("                </button>");
document.writeln("                <ul class=\'dropdown-menu  text-center list-inline\'>");
document.writeln("                    <li><a href=\'index.html\' style=\'color: #086194\'>首页</a></li>");
document.writeln("                    <li><a href=\'service.html\'> 服务</a></li>");
document.writeln("                    <li><a href=\'programme.html\'>方案</a></li>");
document.writeln("                    <li><a href=\'news.html\'> 资讯</a></li>");
document.writeln("                    <li><a href=\'about.html\'> 关于</a></li>");
document.writeln("                    <li><a href=\'#\'>论坛</a></li>");
document.writeln("                </ul>");
document.writeln("            </div>");
document.writeln("            <div class=\'col-sm-9 hidden-xs\'>");
document.writeln("                <ul class=\'list-unstyled list-inline text-right \'>");
document.writeln("                    <li><a href=\'index.html\' style=\'color: red;border-bottom: 2px solid red\'>首页</a></li>");
document.writeln("                    <li><a href=\'service.html\'>服务</a></li>");
document.writeln("                    <li><a href=\'programme.html\'>方案</a></li>");
document.writeln("                    <li><a href=\'news.html\'>资讯</a></li>");
document.writeln("                    <li><a href=\'about.html\'>关于</a></li>");
document.writeln("                    <li><a href=\'#\'>论坛</a></li>");
document.writeln("                </ul>");
document.writeln("            </div>");
document.writeln("        </div>");
document.writeln("    </div>");
document.writeln("</div>");
document.writeln("<!-----------------以上是头部内容------------>");
document.writeln("</body>");
document.writeln("</html>");

调用下


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>***</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/master.css" rel="stylesheet">
    <script src="js/head.js"></script>
</head>