在寫純Html網(wǎng)站的時(shí)候，每個(gè)頁(yè)面的頭部菜單敛瓷、js叁巨、css和底部說明都是同樣的，有的時(shí)候你要改琐驴，就要一個(gè)一個(gè)的去改俘种，通過下面方法將這些相同的抽取出來秤标，方便后期維護(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ù)來源：</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="#"></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>
