方法一、使用script方法：
制作一個(gè)共用頭部文件head.js或一個(gè)共用底部文件foot.js。如主頁(yè)文件是mac.htm，調(diào)用頭部或底部文件的方法是：在主頁(yè)文件代碼的開(kāi)始位置和結(jié)束位置分別增加下面的代碼:<script src=’head.js’>和<script src=’foot.js’>調(diào)用共同的網(wǎng)頁(yè)頭部或者網(wǎng)頁(yè)底部，減少了每個(gè)頁(yè)面都要編寫(xiě)頭部或底部的復(fù)雜程度，而且方便修改，只要修改一個(gè)頭部或者底部文件，所有頁(yè)面的頭部或者底部都隨之改變，增加了工作效率。
導(dǎo)航條HTML實(shí)現(xiàn)代碼如head.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="../css/head.css">
</head>
<body>
<div class='miaov_head'>
<ul>
<li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Music</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></li>
</ul>
</div>
</body>
</html>
其css文件為head.css:
* {
margin: 0;
padding: 0;
}
body {
background: white;
position: relative;
height: 100%;
color: #777;
font-size: 13px;
}
li {
list-style: none;
text-decoration: none;
}
.miaov_head {
height: 36px;
width: 100%;
margin: 0 auto;
background: black;
margin-bottom: 0px;
}
.miaov_head ul {
float: left;
width: 900px;
height: 36px;
margin-top: 0px;
color: white;
position: absolute;
top: 0px;
margin-left: 250px;
}
.miaov_head ul li {
float: left;
padding-left: 80px;
margin-left: 0px;
color: white;
list-style: none;
}
.miaov_head ul li a {
color: white;
font-size: 14px;
text-decoration: none;
}
.miaov_head input {
position: absolute;
top: 5px;
margin-left: 1000px;
width: 200px;
height: 22px;
}
.miaov_head a {
line-height: 36px;
color: #777;
}
.miaov_head a:hover {
color: #555;
}
將以上HTML代碼轉(zhuǎn)換為JavaScript：
document.writeln("<!DOCTYPE html>");
document.writeln("<html>");
document.writeln("<head>");
document.writeln("<meta charset=\&;utf-8\&;>");
document.writeln("<meta http-equiv=\&;X-UA-Compatible\&; content=\&;IE=edge,chrome=1\&;>");
document.writeln("<title>Examples</title>");
document.writeln("<meta name='description' content=\&;\&;>");
document.writeln("<meta name='keywords' content=\&;\&;>");
document.writeln("<link rel=\&;stylesheet\&; type=\&;text/css\&; href=\&;../css/head.css\&;>");
document.writeln("</head>");
document.writeln("<body >");
document.writeln(" <div class=\'miaov_head'>");
document.writeln(" <ul>");
document.writeln(" <li><a href=\&;http://www.cnblogs.com/jtjds/\&;>Mac</a></li>");
document.writeln(" <li><a href=\&;http://www.cnblogs.com/jtjds/\&;>iPad</a></li>");
document.writeln(" <li><a href=\&;http://www.cnblogs.com/jtjds/\&;>iPhone</a></li>");
document.writeln(" <li><a href=\&;http://www.cnblogs.com/jtjds/\&;>Watch</a></li>");
document.writeln(" <li><a href=\&;http://www.cnblogs.com/jtjds/\&;>Music</a></li>");
document.writeln(" <li><a href=\&;http://www.cnblogs.com/jtjds/\&;>Contact Us</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
document.writeln(" ");
document.writeln("</body>");
document.writeln("</html>");
document.writeln("");
并保存在head.js中，保存之后當(dāng)需要使用它的時(shí)候，可在頭部調(diào)用js文件，例如在mac.html中調(diào)用head.js：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../javascript/head.js"></script>
</head>
<body>
<ul>
<li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Music</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></li>
</ul>
</body>
</html>
在瀏覽器中查看：
方法二、使用$("selector").load()
為了避免多頁(yè)面情形下的代碼重復(fù)，可以利用 load() 方法，將重復(fù)的部分（例如導(dǎo)航欄）放入單獨(dú)的文件
//1.當(dāng)前文件中要插入的地方使用此結(jié)構(gòu)：
<div class="include" file="***.html"></div>
//2.***.html中放入內(nèi)容，用html格式僅僅因?yàn)闀?huì)有編輯器的書(shū)寫(xiě)輔助。。
//3.代碼：
$(".include").each(function() {
if (!!$(this).attr("file")) {
var $includeObj = $(this);
$(this).load($(this).attr("file"), function(html) {
$includeObj.after(html).remove(); //加載的文件內(nèi)容寫(xiě)入到當(dāng)前標(biāo)簽后面并移除當(dāng)前標(biāo)簽
})
}
});
或者在index文件里只寫(xiě)重復(fù)部分，剩下的一股腦放各自單獨(dú)文件 load() 進(jìn)來(lái)~
相比于第一種，個(gè)人更推薦第二種方法。
參考：jQuery - AJAX load() 方法
到此這篇關(guān)于多個(gè)HTML頁(yè)面共同調(diào)用一段html代碼的方法的文章就介紹到這了,更多相關(guān)HTML共同調(diào)用一段html代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
