在html中引入其他html文件的方式

方式一：基于Jquery的<div>嵌套html

<script src="js/jquery-3.3.1.js"></script>
<script>
   $(function () {
       $(".copyright").load("copyright.html");
    });
</script>

<div class="copyright">
</div>

方式二：外部js

$(function () {
    $.get("header.html",function (data) {
        $("#header").html(data);
    });
    $.get("footer.html",function (data) {
        $("#footer").html(data);
    });
});

<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>

方式三：纯JS方法

 function load_footer() {
 document.getElementById("footer").innerHTML = '<object type="text/html" data="new.html" width="100%" height="100%"></object>';
}

方式四：iframe 方法（未测试）

<div class="main-container" id="main" style="width:99%">
 <iframe src="footer.html" width="100%" height="100%" frameborder="0">
 您的浏览器不支持iframe，请升级
 </iframe>
</div>

 

使用jsp的方法：

<%@include file="header.html"%>