在寫純Html網站的時候，每個頁面的頭部菜單、js、CSS和底部說明都是同樣的，有的時候你要改，就要一個一個的去改，通過下面方法將這些相同的抽取出來，方便后期維護！ 希望能幫到你～！ 在applyBusiness.html頁面引入公共頁頭header.html。
1、applyBusiness.html：
<!DOCTYPE html><html> <head> <title>我的申請任務</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">科信業務事項：</label> <select id="businessType" name="businessType" class="form-control optionLength"> <option> </option> <option value="104" servicetype="1">故障申報</option><option value="105" servicetype="2">服務申請</option> </select> </div> <div class="form-group col-sm-4 col-md-4 padding-0"> <label class="text-right labelBlock">狀態：</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">已辦結</option> </select> </div> <div class="form-group col-sm-4 col-md-4 padding-0"> <label class="text-right labelBlock">業務來源：</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">申請時間：</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(); //項目路徑/** * 動態加載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>'); }};/** * 取得項目路徑 * @author wul */function getRootPath() { //取得當前URL var path = window.document.location.href; //取得主機地址后的目錄 var pathName = window.document.location.pathname; var post = path.indexOf(pathName); //取得主機地址 var hostPath = path.substring(0, post); //取得項目名 var name = pathName.substring(0, pathName.substr(1).indexOf("/") + 1); return hostPath + name + "/";}//動態生成metadynamicLoading.meta();//動態加載項目 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");//動態加載項目 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="#"></a> <p class="navbar-text navHeader">科信服務門戶</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">首頁 </a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">個人服務中心 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="newWorkflow/personalManage/applyBusiness/html" target="_blank">我申請的業務</a></li> <li><a href="newWorkflow/personalManage/dealBusiness/html">我經辦的業務</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">服務管理中心 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="newWorkflow/serviceManage/businessFlowManage/html" target="_blank">業務表單管理</a></li> <li><a href="newWorkflow/serviceManage/businessReportManage/html" target="_blank">業務流程管理</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>轉載傳送門
新聞熱點
疑難解答
