是否有任何 jquery 插件可以在 HTML 页面中保留常见的页眉和页脚？ [关闭]答案

【问题标题】：Is there any jquery plugin to keep common header and footer in a HTML page? [closed]是否有任何 jquery 插件可以在 HTML 页面中保留常见的页眉和页脚？ [关闭]
【发布时间】：2012-01-25 09:50:10
【问题描述】：

是否有任何 jquery 插件可用于在 HTML 页面中保留公共页眉和页脚？

如果我可以将 header.html 和 footer.html 添加到 index.html 中。

我知道我可以使用 php，但如果可能的话，我不想在本地 PC 上安装任何服务器。稍后完成所有工作后，我将使用 php 包含

header.html

<title>Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/modernizr-2.0.6.min.js"></script>

index.html

{include header.html}

<body class="home">

{include footer.html}

Footer.html

<footer class="f1">
    <p>copyright &copy; year</p>
</footer><!-- .f1 -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/general.js"></script>
</body>
</html>

【问题讨论】：

可能重复：stackoverflow.com/questions/170168/jquery-templating-engines
@Chad - 你添加的问题非常高级，我的问题有简单的需求。

标签： javascript jquery html jquery-plugins

【解决方案1】：

jQuery 本身有一些特性可以让你做到这一点。如果您可以在每个页面上选择页眉/页脚的容器，您可以插入任何您想要的通用内容，甚至替换现有的内容。

jQuery 替换网站的常用部分

你可以这样做：

jQuery(function(){
    jQuery('.header').html('SOME COMMON HEADER');
    jQuery('.footer').html('SOME COMMON FOOTER');
});

在此处查看实际操作：http://jsfiddle.net/6sCfm/

jQuery 将外部文件加载到容器中

或者，如果你坚持加载外部文件，你可以这样做（使用.load()）：

jQuery(function(){
    jQuery('.header').load('header.html');
    jQuery('.footer').load('footer.html');
});

但请注意您作为参数提供的正确路径并确保文件应该只有您需要的 HTML（没有 <head>、<body> 标记等 - 它会使 HTML 不正确）。

将部分页面加载到容器中

如果您有整页（<head>、<header> 等），则只能加载其中的一部分。最好为您要加载的部分（例如header 和footer）提供有意义的 ID，并在路径中的空格之后提供它们作为选择器：

jQuery(function(){
    jQuery('.header').load('header.html #header');
    jQuery('.footer').load('footer.html #footer');
});

这应该足够灵活:)

【讨论】：

我想做类似php.about.com/od/tutorials/ht/template_site.htm
我在我的问题中添加了更多信息我想怎么做
@JitendraVyas：你做错了。我的意思是您正在尝试添加甚至在执行您自己的脚本之前就会加载的脚本。没有噱头就无法做到这一点，我建议更改您的设计并使用服务器端代码。但是如果你坚持，不要将<head>加载为HTML，只需从JS中修改一些东西（例如窗口的标题），并在<body>内使用我的建议。就脚本而言，您可以使用jQuery.getScript() 加载它们，但在执行加载它们的代码之前它们不会加载。祝你好运！
所以我要问的只有服务器端才有可能。
@JitendraVyas 是的，就像我说的页面必须在您的客户端脚本执行之前加载。如果在这些脚本运行之前您的页面上没有 <head/> 或 <html/>，则您的页面无效。此外，如果您在标题页中包含 jQuery，则在您尝试使用 jQuery 后会加载它；这是没有意义的。

【解决方案2】：

jQuery UI 是working on templating，并且还有一个现有模板引擎的列表（在那个页面上）。

如果你想要一些超级简单的东西，只需在你想要的内容中写一些小的 ajax 即可。然后将该脚本包含在所有需要它的页面上。

$.get('/header.html', function(data) { $('#headerPlaceholder').html(data); });
$.get('/footer.html', function(data) { $('#footerPlaceholder').html(data); });

【讨论】：

我只想为多个页面保留公共页眉和页脚，所以如果我更改页眉或页脚，它应该适用于所有页面。我知道如何在 php 中做到这一点，但我想做同样的客户端
header 也会有 html 和 head 以及 css、javascript 链接
嗯，这会做你想做的，但如果你在客户端这样做，页面必须先加载。没有<html/>、<head/> 等的页面将无效。也许其他人有办法看到这一点，而我没有。顺便说一下，here 也给了我同样的答案。