方法一、使用script方法：
制作一個共用頭部文件head.js或一個共用底部文件foot.js。如主頁文件是mac.htm，調用頭部或底部文件的方法是：在主頁文件代碼的開始位置和結束位置分別增加下面的代碼:<script src=’head.js’>和<script src=’foot.js’>調用共同的網頁頭部或者網頁底部，減少了每個頁面都要編寫頭部或底部的復雜程度，而且方便修改，只要修改一個頭部或者底部文件，所有頁面的頭部或者底部都隨之改變，增加了工作效率。
導航條HTML實現代碼如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代碼轉換為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中，保存之后當需要使用它的時候，可在頭部調用js文件，例如在mac.html中調用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()
為了避免多頁面情形下的代碼重復，可以利用 load() 方法，將重復的部分（例如導航欄）放入單獨的文件
//1.當前文件中要插入的地方使用此結構：
<div class="include" file="***.html"></div>
//2.***.html中放入內容，用html格式僅僅因為會有編輯器的書寫輔助。。
//3.代碼：
$(".include").each(function() {
if (!!$(this).attr("file")) {
var $includeObj = $(this);
$(this).load($(this).attr("file"), function(html) {
$includeObj.after(html).remove(); //加載的文件內容寫入到當前標簽后面并移除當前標簽
})
}
});
或者在index文件里只寫重復部分，剩下的一股腦放各自單獨文件 load() 進來~
相比于第一種，個人更推薦第二種方法。
參考：jQuery - AJAX load() 方法
到此這篇關于多個HTML頁面共同調用一段html代碼的方法的文章就介紹到這了,更多相關HTML共同調用一段html代碼內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
