javascript 是否有任何 jquery 插件可以在 HTML 页面中保留常见的页眉和页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8592275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any jquery plugin to keep common header and footer in a HTML page?
提问by Jitendra Vyas
Is there any jquery pluginto use to keep common header and footer in a HTML page?
是否有任何 jquery 插件可用于在 HTML 页面中保留常见的页眉和页脚？
Like if i can add header.html and footer.html into index.html.
就像我可以将 header.html 和 footer.html 添加到 index.html 中一样。
I know I can with php but if possible I want to do without installing any server on my local PC. later after all work done i will use php includes
我知道我可以使用 php，但如果可能的话，我不想在本地 PC 上安装任何服务器。完成所有工作后，我将使用 php 包括
header.html
标题.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
索引.html
{include header.html}
<body class="home">
{include footer.html}
Footer.html
页脚.html
<footer class="f1">
<p>copyright © 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>
回答by Tadeck
jQuery itself has some features that allow you to do that. If you can select header's/footer's container on each page, you can insert any common content you want, even replace the existing one.
jQuery 本身有一些特性可以让你做到这一点。如果您可以在每个页面上选择页眉/页脚的容器，您可以插入任何您想要的常见内容，甚至替换现有内容。
jQuery replacing common parts of site
jQuery 替换站点的公共部分
You can do something like this:
你可以这样做：
jQuery(function(){
jQuery('.header').html('SOME COMMON HEADER');
jQuery('.footer').html('SOME COMMON FOOTER');
});
See it in action here: http://jsfiddle.net/6sCfm/
在这里查看它的实际效果：http: //jsfiddle.net/6sCfm/
jQuery loading external files into containers
jQuery 将外部文件加载到容器中
Or, if you insist on loading external files, you can do this (using .load()):
或者，如果您坚持加载外部文件，您可以这样做（使用.load()）：
jQuery(function(){
jQuery('.header').load('header.html');
jQuery('.footer').load('footer.html');
});
but pay attention to correct paths you are giving as parameters and make sure, that files should have only the HTML you need(no <head>, <body>tags, etc. - it will make HTML incorrect).
但请注意您作为参数提供的正确路径，并确保文件应仅包含您需要的 HTML（没有<head>、<body>标签等 - 它会使 HTML 不正确）。
Loading parts of pages into containers
将部分页面加载到容器中
If you have whole pages (with <head>, <header>etc.), you can load only parts of them. Preferably give meaningful IDs to the parts you want to load (eg. headerand footer) and supply them in the path, after space, as selector:
如果你有整页（有<head>，<header>等），可以加载它们的唯一部分。最好为要加载的部分（例如header和footer）提供有意义的 ID，并将它们提供在路径中，在空格之后，作为选择器：
jQuery(function(){
jQuery('.header').load('header.html #header');
jQuery('.footer').load('footer.html #footer');
});
This should be flexible enough :)
这应该足够灵活:)
回答by Chad
jQuery UI is working on templatingand also has a list of existing template engines (on that page).
jQuery UI 正在处理模板，并且还有一个现有模板引擎列表（在该页面上）。
If you want something super simple, just write something small to ajax in the content you want. Then include that script on all pages that need it.
如果你想要一些超级简单的东西，只需在你想要的内容中写一些小到 ajax 的东西。然后在需要它的所有页面上包含该脚本。
$.get('/header.html', function(data) { $('#headerPlaceholder').html(data); });
$.get('/footer.html', function(data) { $('#footerPlaceholder').html(data); });
