有没有一种简单的方法可以使用 HTML 在所有页面上加载外部标题？答案

【问题标题】：Is there an easy way to load an external header on all pages using HTML?有没有一种简单的方法可以使用 HTML 在所有页面上加载外部标题？
【发布时间】：2015-11-24 21:09:30
【问题描述】：

我在一个有 20 多个页面的网站上工作，并且更新所有页面上的主链接变得非常烦人。我已经能够在不久前创建的 Wordpress 模板上使用 PHP 来执行此操作，但是我正在处理的当前站点仅使用 HTML、CSS 和 jQuery，我希望保持这种方式。

【问题讨论】：

没有。 html 没有“可编程性”。你需要一些服务器端的东西来做这种事情。如果你没有/不能有 php，那么考虑去老学校，并使用类似服务器端包含的东西。
我尝试使用 iframe 元素，它几乎可以工作，但它忽略了所有的 CSS。 iframe 是最好的方法吗？
谢谢@MarcB，我会调查的。
你可以使用任何你想要的东西。没有“最佳”选项。他们都有积极和消极的一面。
<iframe> 很少是最好的方法。仅在必须时使用它。处理包括/模板/等的静态站点生成器（Jekyll 等）之类的东西。并留下完整的 HTML（没有 PHP）是更好的选择。

标签： jquery html css

【解决方案1】：

HTML5 导入应该可以解决问题

<link rel="import" href="/path/to/imports/stuff.html">

【讨论】：

酷。没想到现在支持了。

【解决方案2】：

我想您可以使用 jQuery 的 get 方法发送一个 ajax 请求，但这并不理想。除此之外，您还可以使用 iframe。

【讨论】：

【解决方案3】：

一种将标头编写为 JavaScript 文件的方法，如下所示：

// header.js
document.write('\
    <em>Add your HTML code here</em>\
');

然后将你的js文件加载到你的html文件中：

<html>   
   <body>
      <p>This html content is written before header</p>
      <script src="header.js"></script>
      <p>And this one after</p>
   </body>
</html>

【讨论】：