是否有任何 jquery 插件可以在 HTML 页面中保留常见的页眉和页脚?

2022-01-11 00:00:00 jquery jquery-plugins javascript html

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

Is there any jquery pluginto use to keep common header and footer in a HTML page?

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

Like if i can add header.html and footer.html into index.html.

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

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

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>

推荐答案

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

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(function(){
    jQuery('.header').html('SOME COMMON HEADER');
    jQuery('.footer').html('SOME COMMON FOOTER');
});

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

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

Or, if you insist on loading external files, you can do this (using .load()):

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

但请注意您作为参数提供的正确路径，并确保 文件应该只有您需要的 HTML(没有 <head>，<body> 标签等 - 它会使 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).

如果您有整个页面(使用 <head>、<header> 等)，则只能加载其中的一部分.最好为您要加载的部分(例如 header 和 footer)提供有意义的 ID，并在路径中提供它们作为选择器:

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. header and footer) and supply them in the path, after space, as selector:

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

这应该足够灵活:)

相关文章