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

Question

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

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

Answer 1

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

服务器脚本

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

服务器端包含

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

客户端包括

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

Answer 2

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

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

你可以在这里找到演示

Answer 3

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

1. 框架
2. 使用Javascript
3. CSS

对每种方法做一点评论.

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

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

1. 完整的AJAX请求,请求页眉/页脚然后将它们放在页面的正确位置;
2. <script type="text/javascript" src="header.js"> 里面有这样的东西: document.write('My header goes here');

通过CSS做它真的是一种滥用.CSS具有content允许您插入一些HTML内容的属性,尽管它实际上并不打算像这样使用.此外,我不确定浏览器对此结构的支持.

Answer 4

你可以用javascript做到这一点,我不认为它需要那么花哨.

如果你有一个header.js文件和一个footer.js.

然后header.js的内容可能是这样的

document.write("<div class='header'>header content</div> etc...")

请记住要转义您正在编写的字符串中的任何嵌套引号字符.然后,您可以使用静态模板调用它

<script type="text/javascript" src="header.js"></script>

并且类似于footer.js.

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

Answer 5

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

Answer 6

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

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

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

例

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

Answer 7

最简单的方法是使用纯 HTML。

您可以使用以下方式之一：

<embed type="text/html" src="header.html">

或者：

<object name="foo" type="text/html" data="header.html"></object>