带有静态HTML的常见页眉/页脚

是否有一种不错的方法使用静态HTML/XHTML创建公共页眉/页脚文件以显示在网站的每个页面上？我知道你可以用PHP或服务器端指令显然做到这一点,但有没有任何办法这样做,绝对没有依赖于服务器缝合一切为你？

编辑:所有非常好的答案,是我的预期.HTML是静态的,句号.没有运行服务器端或客户端的东西,没有真正的方法来改变它.我发现Server Side Includes似乎是我最好的选择,因为它们非常简单并且不需要编写脚本.

有三种方法可以做你想要的

服务器脚本

这包括像php,asp,jsp ......但是你对此说不

服务器端包含

您的服务器正在提供页面,那么为什么不利用内置的服务器端包含？每个服务器都有自己的方法来做到这一点,利用它.

客户端包括

此解决方案让您在客户端上加载页面后回调服务器.

JQuery load()函数可以用于包含公共页眉和页脚.代码应该是这样的

你可以在这里找到演示

由于HTML没有"include"指令,我只能考虑三种解决方法

框架

使用Javascript

CSS

对每种方法做一点评论.

帧可以是标准帧或iFrame.无论哪种方式,您都必须为它们指定固定高度,因此这可能不是您要寻找的解决方案.

Javascript是一个相当广泛的主题,并且可能存在许多方法如何使用它来实现期望的效果.不过我可以想到两个方面:

完整的AJAX请求,请求页眉/页脚然后将它们放在页面的正确位置;

并且类似于footer.js.

注意:我不推荐这个解决方案 - 它是一个黑客并且有许多缺点(对于初学者而言SEO和可用性很差) - 但它确实符合提问者的要求.



5> juanpazos..：

---

最好的解决方案是使用具有模板/包含支持的静态站点生成器.我使用Hammer for Mac,它很棒.还有Guard,一个ruby gem来监视文件更改,编译sass,连接任何文件,可能还包括.



6> Shubham Bada..：

---

您可以使用jquery轻松完成此操作。如此简单的任务不需要php。只需在您的网页中添加一次即可。

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

现在在任何元素上使用data-load从外部html文件中调用其内容，只需在要放置内容的html代码中添加一行即可。

例