如何创建可以包含在其他 HTML 页面中的 HTML 文件？ [复制]答案

【问题标题】：How can I create an HTML file which I can include in other HTML pages? [duplicate]如何创建可以包含在其他 HTML 页面中的 HTML 文件？ [复制]
【发布时间】：2015-11-08 10:09:12
【问题描述】：

如果我们想在多个页面上运行相同的 html 标头代码，我们是否可以有一个外部 html 文件或链接到现有的标头代码，而不是在每个页面中编写相同的代码？

【问题讨论】：

如果您使用后端语言，最好在服务器端而不是客户端进行。如果你使用 PHP，你可以使用include
我打算建议通过 JS 执行此操作对于常见的部分来说通常是一个非常糟糕的主意。您可能应该为此使用服务器端框架或生成工具。

标签： javascript html

【解决方案1】：

你可以用 jquery 来做。将此代码放在 index.html 中

<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

并将这段代码放在 header.html 和 footer.html 中与 index.html 相同的位置

<a href="http://www.google.com">click here for google</a>

然后访问index.html，应该可以点击链接标签了。

【讨论】：

一些关于它的文档。 api.jquery.com/load

【解决方案2】：

您可以使用 IFRAME 在当前 html 页面中加载任何其他 HTML 页面的内容。

<html>
    <head>
        YOUR CSS GOES HERE
    </head>
    <body>
        ANY TEXT YOU WANT
        <iframe src="PATH TO OTHER HTML PAGE">
        </iframe>
    </body>
</html>

【讨论】：

这可行，但是，它不是包含另一个文件的非常优雅的方式。应该通过include() 之类的东西在服务器端完成，或者如果需要，建议在客户端使用@shas 之类的东西。