如何在 HTML CSS Web 应用程序中使用通用页眉和页脚？答案

【问题标题】：How to have a common header and footer in a HTML CSS web app?如何在 HTML CSS Web 应用程序中使用通用页眉和页脚？
【发布时间】：2013-03-02 10:50:22
【问题描述】：

我一直在为我的所有项目使用 ASP.NET MVC，并且一直在使用 @Html.Partial("_header") 我想在我的任何页面中包含一个通用的静态 html。

但现在我正在使用纯 HTML CSS 和 JS 网络应用程序。这里我没有使用任何服务器端技术，只是一组静态内容。

在网站上我有以下布局

----- 标题 -----

-- 改变内容------

----- 页脚 ------

所以，这就是我想要的，我想以某种方式做我曾经实现的事情@Html.Partial()

我知道的一种方法是使用 IFRAMES，还有其他更好的方法吗？

【问题讨论】：

标签： javascript jquery html css asp.net-mvc-4

【解决方案1】：

我在做chrome扩展时遇到过这种情况。

我所做的是将页眉页脚存储在 js 文件的变量中，然后使用 jquery 将其附加到正文头.....繁荣我在页面中得到了固定的页眉页脚。

WORKING DEMO

代码：

<!DOCTYPE html>
<html>
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">      </script>
 <script>
 function appendheaderfooter(){
 var header="<div style='position:fixed;top:0px;background-color:aqua;'>header html</div>";
 var footer="<div style='position:fixed;bottom:0px;background-color:aqua;'>footer html</div>"
 $("body").append(header+footer);
}
  window.onload = appendheaderfooter;
</script>
<style>
div{width:100%;}
</style>
</head>
<body><br/>
<p>Content goes here</p>
</body>
</html>

【讨论】：

所以页面必须在加载js之前向右移动？
不...我编写这些 html 的方式使它们保持相应的页眉和页脚。所以没有任何转移的问题。
禁用 JavaScript 时会发生什么？参考文献“渐进增强”/“优雅退化”
@kwah:he is using pure html css and javascript....如果禁用 javascript，一切都会失败。老实说，我从未遇到过页面上禁用 javascripts 的情况。
是的，在我的情况下，javascript 将始终启用。谢谢milind，你能分享一些代码，一个示例/小提琴吗？

【解决方案2】：

如果您的 Web 应用程序将托管在支持服务器端包含（例如 Apache）的 Web 服务器上，您只需添加  根据您的 Web 服务器，您可能需要先启用 SSI（Options +Includes in .htaccess on apache）

【讨论】：

【解决方案3】：

框架

框架曾经是要走的路，但随着时间的流逝，由于某种原因，它们已不再受到开发人员的青睐 - 请注意 this article 从 2006 年开始！

幸运的是，您似乎赞成避免使用框架:)

基于 JavaScript 的 SSI

其次，服务器端包含 (SSI) 或其他一些基于服务器的“包含”优于 JavaScript，尽管我承认这不一定是“纯”HTML/JS/CSS 解决方案。

SSI 语句格式如下：


http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

有很多答案反映了这种关于 SO 的观点 - 例如，搜索中出现的前三个是 here, here 和 here ...

请注意，最后一个接受的答案是推荐 JS 解决方案，但最后一段陈述了对服务器端的偏好..

编译您的 HTML 代码（我的首选）

我需要创建一个“纯”HTML/CSS/JS 网站已经有一段时间了，但这样做时，我的偏好是保持代码模块化并在部署之前“编译”HTML。

虽然在部署之前需要做一些额外的工作，但它会产生“最纯粹”的输出，以便在部署的代码中使用。您像往常一样编写代码，使用一点魔法来指示您想要包含的内容和位置，然后将此代码“编译”成部署到您网站上的标准 HTML/CSS/JS 文件。

这带来了使用模板化页眉/页脚/菜单栏/侧边栏文件的便利性和简单性，但需要事先编译 HTML 代码。

SASS 使用 Ruby on Rails 来执行此编译。不幸的是，在这个特定的时刻，它的 HTML 等价物的引用正在逃避我，所以我将在重新定位它时更新我的答案。

【讨论】：

【解决方案4】：

您是否愿意使用Frameset，尽管它在 HTML5 中不受支持？

【讨论】：