静态HTML页面如何加入公共头尾（附代码）

制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:

比如：footer.js文件------根据上面的footer.html，利用转换工具：http://tool.chinaz.com/Tools/Html_Js.aspx

footer.html
 <footer class="sc-footer">
    <img src="../../starCapital-pc/images/sc-footer-logo.png" alt="" />

    <div class="sc-footer_bottom w710">
      <div class="sc-footer_bottom_t w580">
        <a >Copyright © DoNews 2000-2019 All Rights Reserved</a>
        <a >版权所有：北京群星资本有限管理公司</a>
        <a >联系地址：北京市海淀区宝盛东路多牛传媒中心</a>
        <a >联系电话：010-XXXXXXXX 邮箱：[email protected]</a>
      </div>
      <div class="sc-footer_bottom_b w580">
        <a >京ICP证10000号</a>
        <a >京网文【2019】0000-000号</a>
        <a >京公网安备XXXXXXXXXXXXXX号</a>
      </div>
    </div>
  </footer>

转换为js
document.writeln("");
document.writeln(" <div class=‘sc-contact’>");
document.writeln(" <div class=‘sc-h3’>");
document.writeln(" <h3 class=‘color-w’>");
document.writeln(" 联系我们");
document.writeln(" “);
document.writeln(” COOPERATION");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-title.png’ alt=’’ />");
document.writeln(" “);
document.writeln(” <ul class=‘flex list w710’>");
document.writeln("

“);
document.writeln(” COMPETITION");
document.writeln("

参赛咨询

");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-results_other.png’ alt=’’ />");
document.writeln(" <ul class=‘item_list’>");
document.writeln(" <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-phone.png’ alt=’’ />[email protected]");
document.writeln("

“);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-weixin.png’ alt=’’ /> [email protected]");
document.writeln(" “);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-email.png’ alt=’’ /> [email protected]");
document.writeln(" “);
document.writeln(” “);
document.writeln(” “);
document.writeln(”

“);
document.writeln(” COMPETITION");
document.writeln("

参赛咨询

“);
document.writeln(” COMPETITION");
document.writeln("

参赛咨询

“);
document.writeln(” COMPETITION");
document.writeln("

参赛咨询

“);
document.writeln(” <img src=’…/…/starCapital-pc/images/code1.png’ alt=’’ class=‘img_max’ />");
document.writeln(" <p class=‘w180’>");
document.writeln(" 官方微信 <span style=‘display: block;’>公众账号二维码");
document.writeln("

“);
document.writeln(” <img src=’…/…/starCapital-pc/images/contant_weixin.png’ alt=’’ class=‘img_min’ />");
document.writeln(" “);
document.writeln(”

“);
document.writeln(” <img src=’…/…/starCapital-pc/images/code1.png’ alt=’’ class=‘img_max’ />");
document.writeln(" <p class=‘w180’>");
document.writeln(" 官方新浪 <span style=‘display: block;’>微博二维码");
document.writeln(" “);
document.writeln(” <img src=’…/…/starCapital-pc/images/contant_weixin.png’ alt=’’ class=‘img_min’ />");
document.writeln("

“);
document.writeln(”

“);
document.writeln(” <img src=’…/…/starCapital-pc/images/code1.png’ alt=’’ class=‘img_max’ />");
document.writeln(" <p class=‘w180’>");
document.writeln(" 官方腾讯 <span style=‘display: block;’>微博二维码");
document.writeln(" “);
document.writeln(” <img src=’…/…/starCapital-pc/images/contant_weixin.png’ alt=’’ class=‘img_min’ />");
document.writeln("

“);
document.writeln(” “);
document.writeln(” “);
document.writeln(” <footer class=‘sc-footer’>");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-footer-logo.png’ alt=’’ />");
document.writeln("");
document.writeln(" <div class=‘sc-footer_bottom w710’>");
document.writeln(" <div class=‘sc-footer_bottom_t w580’>");
document.writeln(" Copyright © DoNews 2000-2019 All Rights Reserved");
document.writeln(" 版权所有：北京群星资本有限管理公司");
document.writeln(" 联系地址：北京市海淀区宝盛东路多牛传媒中心");
document.writeln(" 联系电话：010-XXXXXXXX 邮箱：[email protected]");
document.writeln(" “);
document.writeln(” <div class=‘sc-footer_bottom_b w580’>");
document.writeln(" 京ICP证10000号");
document.writeln(" 京网文【2019】0000-000号");
document.writeln(" 京公网安备XXXXXXXXXXXXXX号");
document.writeln(" “);
document.writeln(” “);
document.writeln(” “);
document.writeln(”");


以后无论在哪个页面，想调用该头部文件，直接插入head.js文件即可：下面是随便建的一个页面，//test.html

群星MARS大赛

<div class="sc-1 w1200">
  <div class="sc-1_item_text">
    <div class="w518">
      <h3>强力推荐</h3>
      <p>RECOMMEND</p>
    </div>
  </div>
  <div class="contentArea-con w710">
    <div class="contentArea-title">
      <h4>这是一个很重要的标题</h4>
      <p>THIS IS A VERY IMPORTANT TITLE.</p>
    </div>
    <div class="contentArea-text">
      资本主义的资本是什么？就是一套社会权力的计量手段，这是基于商品经济的。资本不断增值的特性，来自私有者对劳动者的剥削——其
      剩余劳动作为资本积累在了资本家手里。而资本家则运用这些资本争夺控制生产的社会权力——购买商品不是资本增值的目的，资本对应
      的不是具体的商品，而是政治权力。按资分配实际就是按对劳动者剥削程度进行社会权力的分配。谁剥削劳动者最有效率，积累的资本越
      多，谁就获得控股权，成为首席决策者，按资分配的股份制度，完全可以拿贵族共和来形容——谁掌握的军队多..
    </div>
    <img src="../images/sc-ab_1.png" alt="" />
    <div class="contentArea-title ">
      <h4>这是一个很重要的标题</h4>
      <p>THIS IS A VERY IMPORTANT TITLE.</p>
    </div>
    <div class="contentArea-text">
      资本主义的资本是什么？就是一套社会权力的计量手段，这是基于商品经济的。资本不断增值的特性，来自私有
    </div>
  </div>

</div>

//引入footer.js即可


**但是这里边存在一个坑，就是我们要引入的公共html页面，无需把页面写完整，只需要包括我们所需的代码片段就可以。因为一个html页面只允许存在一个body，去掉所有的<html><body>标签。切记！！！**

静态HTML页面如何加入公共头尾（附代码）

制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:

猜你喜欢