多个HTML页面共同调用一段html代码的方法

站长资源 2025/10/25 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

方法一、使用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

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

评论“多个HTML页面共同调用一段html代码的方法”

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

多个HTML页面共同调用一段html代码的方法

提交表单后转到另一个文件

HTML页面局部刷新的实现代码

评论“多个HTML页面共同调用一段html代码的方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

多个HTML页面共同调用一段html代码的方法

提交表单后转到另一个文件

HTML页面局部刷新的实现代码

评论“多个HTML页面共同调用一段html代码的方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存