Javascript 如何将我的网站页眉和页脚存储在一个位置？

我总是重写我的页眉和页脚，每次编辑我都必须手动将所有代码复制并粘贴到网页中。显然这是错误的方法，但我不确定正确的方法。我目前的想法是先有一个“header”和“footer”div，然后使用jquery的$（document）。我担心它会很慢，因为它会在执行页眉/页脚代码之前等待整个页面呈现。处理此问题的常用方法是什么？

常用方法是使用服务器端语言，如。或者，如果您只需要页脚和页眉包含，您可以通常使用

，也可以使用一些服务器端模板技术，例如PHP、JSP或XSL。使用这些方法之一，创建可链接的可重用代码片段相当简单

---

对于纯HTML+JS方法，可以使用IFRAME链接到独立的页眉和页脚HTML文件。这将允许您将所有页眉和页脚信息保存在一个位置，只需更新一次。

使用HTML或PHP includes。

听起来您需要一些服务器端技术。你选择哪一个（众多选项）取决于你和你的主机。最有可能的是，您的主机将支持PHP和SSI（服务器端包括）

在最简单的设置中，基本上将公共代码放入各个文件中，比如

header.inc

和

footer.inc

。这些文件的名称或扩展名是什么并不重要

对于PHP，您的页面现在应该是

*.PHP

，而不是

*.html

，您需要编写以下代码：

<?php include('header.inc'); ?>
<p>
    Here is your regular document.
</p>
<?php include('footer.inc'); ?>

这是你的常规文件。

对于SSI，您不必更改文件名，代码如下所示：

<!--#include virtual="header.inc" -->
<p>
    Here is your regular document.
</p>
<!--#include virtual="footer.inc" -->

这是你的常规文件。

您肯定不想用Javascript实现这一点。首先，在Javascript执行之前不会加载页眉和页脚，但更重要的是，任何未启用Javascript的人都不会看到它们（并且要求Javascript查看静态页面也没有意义）

有两种简单的方法可以做到这一点：

1） 使用服务器端语言（如php）包含页脚：

<?php
  include('header.html');
?>
The rest of the page goes here
<?php
  include('footer.html');
?>

这一页的其余部分放在这里

---

2） 使用生成静态页面的构建/部署过程。这与1）类似，但每次构建只执行一次，而不是每次有人点击页面时都执行一次。

对于某些类型的服务器端代码，比如PHP，没有办法吗？否则你的网站将无法访问与javascript禁用。我可以使用php，但我仍然不确定的最佳解决方案。我的意思是，如果我有site-a.php site-b.php site-c.php，我仍然需要复制并粘贴代码。也许这三个都可以从一个文件中读取。。。