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

方法一、使用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代码内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！