Html頁(yè)面內(nèi)引入抽取出來(lái)的Html，js，css示例

在寫純Html網(wǎng)站的時(shí)候，每個(gè)頁(yè)面的頭部菜單、js、css和底部說(shuō)明都是同樣的，有的時(shí)候你要改，就要一個(gè)一個(gè)的去改，通過(guò)下面方法將這些相同的抽取出來(lái)，方便后期維護(hù)！
　　希望能幫到你～！
在applyBusiness.html頁(yè)面引入公共頁(yè)頭header.html。

1、applyBusiness.html：

<!DOCTYPE html>
<html>
  <head>
    <title>我的申請(qǐng)任務(wù)</title>
    <script type="text/javascript" charset="utf-8" src="../../../js/platform/system/header.js"></script>
  </head>
  <body>
      <div class="container">
         <div class="mainBody mt-20 applyBusiness">
             <form class="form-inline mt-30" id="searchFormId">
               <div class="clearfix">
                   <div class="form-group col-sm-4 col-md-4 padding-0">
                        <label class="text-right labelBlock">科信業(yè)務(wù)事項(xiàng)：</label>
                        <select id="businessType" name="businessType" class="form-control optionLength">
                                <option> </option>
                            <option value="104" servicetype="1">故障申報(bào)</option><option value="105" servicetype="2">服務(wù)申請(qǐng)</option>
                        </select>
                    </div>
                    <div class="form-group col-sm-4 col-md-4 padding-0">
                        <label class="text-right labelBlock">狀態(tài)：</label>
                        <select id="serviceStatus" name="serviceStatus" class="form-control optionLength">
                                <option value="all">全部</option>
                                <option value="pending">待提交</option>
                                <option value="handling">辦理中</option>
                                <option value="completed">已辦結(jié)</option>
                       </select>
                    </div>
                    <div class="form-group col-sm-4 col-md-4 padding-0">
                        <label class="text-right labelBlock">業(yè)務(wù)來(lái)源：</label>
                        <select id="serviceSource" name="serviceSource" class="form-control optionLength">
                       </select>
                    </div>
               </div>
                <div class="clearfix mt-20">
                    <div class="col-sm-5 col-md-5 halfWidth">
                        <div class="form-group" id="applyTime1">
                            <label class="text-right" for="startApplyDate">申請(qǐng)時(shí)間：</label>
                            <input type="text" readonly="readonly" size="16" value="" id="startApplyDate" name="startApplyDate" class="form-control form_date" data-date-format="yyyy-mm-dd">
                        </div>
                        <div class="form-group" id="applyTime2">
                            <label for="endApplyDate">-</label>
                            <input type="text" readonly="readonly" size="16" value="" id="endApplyDate" name="endApplyDate" class="form-control form_date" data-date-format="yyyy-mm-dd">
                        </div>
                    </div>
                    <div class="col-sm-2 col-md-2 margin-top-20">
                        <button id="search-btn" type="button" class="btn btn-primary btn-warning marginLeft">搜索</button>
                        <button type="button" id="resetId" class="btn btn-primary btnIp">重置</button>
                    </div>
                </div>
            </form>
            <table style="margin-top:30px" id="table"></table>
        </div>
      </div>
    </body>
</html>

2、header.js:

/**
 * 引用JS和CSS頭文件
 */
var rootPath = getRootPath(); //項(xiàng)目路徑

/**
 * 動(dòng)態(tài)加載CSS和JS文件
 */
var dynamicLoading = {
    meta : function(){
        document.write('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
    },
    css: function(path){
        if(!path || path.length === 0){
            throw new Error('argument "path" is required!');
        }
        document.write('<link rel="stylesheet" type="text/css" href="' + path + '">');
    },
    js: function(path, charset){
        if(!path || path.length === 0){
            throw new Error('argument "path" is required!');
        }
        document.write('<script charset="' + (charset ? charset : "utf-8") + '" src="' + path + '"></script>');
    }
};

/**
 * 取得項(xiàng)目路徑
 * @author wul
 */
function getRootPath() {
    //取得當(dāng)前URL
    var path = window.document.location.href;
    //取得主機(jī)地址后的目錄
    var pathName = window.document.location.pathname;
    var post = path.indexOf(pathName);
    //取得主機(jī)地址
    var hostPath = path.substring(0, post);
    //取得項(xiàng)目名
    var name = pathName.substring(0, pathName.substr(1).indexOf("/") + 1);
    return hostPath + name + "/";
}

//動(dòng)態(tài)生成meta
dynamicLoading.meta();

//動(dòng)態(tài)加載項(xiàng)目 JS文件
dynamicLoading.js(rootPath + "/js/common/jquery-1.9.1.min.js", "utf-8");
dynamicLoading.js(rootPath + "/js/common/bootstrap.min.js", "utf-8");
dynamicLoading.js(rootPath + "/js/process/center/common/baseApp.js", "utf-8");
dynamicLoading.js(rootPath + "/js/process/center/common/bootstrap-datetimepicker.min.js", "utf-8");
dynamicLoading.js(rootPath + "/js/process/center/common/bootstrap-datetimepicker.zh-CN.js", "utf-8");
dynamicLoading.js(rootPath + "/js/process/center/common/jquery.dataTables.js", "utf-8");
dynamicLoading.js(rootPath + "/js/platform/system/loadHeader.js", "utf-8");

//動(dòng)態(tài)加載項(xiàng)目 CSS文件
dynamicLoading.css(rootPath + "/css/common/bootstrap-3.3.5/css/bootstrap.min.css");
dynamicLoading.css(rootPath + "/css/common/bootstrap-3.3.5/css/bootstrap-responsive.css");
dynamicLoading.css(rootPath + "/css/workflow/css/jquery.dataTables.css");
dynamicLoading.css(rootPath + "/css/workflow/css/newWorkflow.css");
3、loadHeader.js 
$(function(){
    $(".container").append('<div id="header"></div>');
    $("#header").load(getRootPath() + "header.html");
});

4、header.html

<nav class="navbar navbar-default navbar-fixed-top navWhole">
     <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed navToggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
           <a class="navbar-brand" href="#">![](./images/process/center/top/gongan.png)</a>
           <p class="navbar-text navHeader">科信服務(wù)門戶</p>
         </div>

         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav navbar-right navToggle">
                 <li><a href="./index.html">首頁(yè) </a></li>
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">個(gè)人服務(wù)中心 <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                         <li><a href="newWorkflow/personalManage/applyBusiness/html" target="_blank">我申請(qǐng)的業(yè)務(wù)</a></li>
                         <li><a href="newWorkflow/personalManage/dealBusiness/html">我經(jīng)辦的業(yè)務(wù)</a></li>
                     </ul>
                 </li>
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">服務(wù)管理中心 <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                         <li><a href="newWorkflow/serviceManage/businessFlowManage/html" target="_blank">業(yè)務(wù)表單管理</a></li>
                         <li><a href="newWorkflow/serviceManage/businessReportManage/html" target="_blank">業(yè)務(wù)流程管理</a></li>
                     </ul>
                 </li>
             </ul>
         </div><!-- /.navbar-collapse -->
     </div><!-- /.container-fluid -->
 </nav>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,113評(píng)論 1贊 92
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,161評(píng)論 4贊 61
  • 1.在本篇文章中我學(xué)到的最重要的概念：①相信團(tuán)隊(duì)的力量，②要合理的安排時(shí)間和工作，③堅(jiān)持才有收獲。 2.讓我怦然心...
    17數(shù)427穆聰敏閱讀 253評(píng)論 2贊 2
  • 2016年已經(jīng)過(guò)去， 北京的冬天雖然冷的異常， 卻依舊沒(méi)有下幾場(chǎng)雪， 自從買了水彩，每周都會(huì)畫幾幅，偶然看到別人畫...
    曾小兮閱讀 2,791評(píng)論 4贊 32
  • 有人跟我說(shuō)，建深，你是現(xiàn)實(shí)主義者。 我變了嗎？我一直追求自己喜歡的，好玩有趣的，我一直跟從內(nèi)心。 他們說(shuō)，這是精致...
    Bekey閱讀 726評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容