如何在HTML CSS Web应用程序中具有通用的页眉和页脚？

Question

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

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

在此站点中，我具有以下布局

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

-----更改内容------

-----脚------

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

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

Answer 1

我在进行chrome扩展时遇到了这种情况。

我所做的是将页眉页脚存储在js文件的变量中，然后使用jquery将其附加到正文中。我正在使用那个js文件，我希望我的页眉和页脚是。我只是在head脚本中添加js。 …我在页面中看到固定的页眉页脚。

工作演示

码：

<!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>

Answer 2

如果您的Web应用程序将托管在支持Server Side Includes（例如Apache）的Web服务器上，则只需添加取决于您的Web服务器，您可以可能需要先启用SSI（Apache的.htaccess中的Options +Includes ）

Answer 3

镜框

框架曾经是行之有效的方法，但是随着时间的流逝，它们由于某种原因而不再受到开发人员的青睐-请注意2006年的这篇文章！

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

JavaScript上的SSI

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

SSI语句的格式如下：


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

有许多答案反映了这种对SO的看法-例如，搜索中出现的前三个答案在此处，此处和此处 ...

请注意，对于最后一个可接受的答案是推荐一个JS解决方案，但是最后一段指出了对服务器端的偏好。

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

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

尽管在部署之前需要一些额外的工作，但它会产生“最纯净的”输出，以在部署的代码中使用。 您可以像平常一样编写代码，使用一点魔力指示要包含的内容以及在何处，然后将这些代码“编译”为沼泽标准的HTML / CSS / JS文件，这些文件会部署到您的网站上。

这带来了使用模板化的header / footer / menu-bar / sidebar文件的简便性，并且需要事先编译HTML代码。

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

Answer 4

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

如何在HTML CSS Web应用程序中具有通用的页眉和页脚？

问题描述

4 个解决方案

解决方案1
1 已采纳 2013-03-02 10:54:31

解决方案2
1 2013-03-02 11:28:47

解决方案3
0 2013-03-02 12:09:02

镜框

JavaScript上的SSI

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

解决方案4
-1 2013-03-02 11:18:30

如何在HTML CSS Web应用程序中具有通用的页眉和页脚？

问题描述

4 个解决方案

解决方案1 1 已采纳 2013-03-02 10:54:31

解决方案2 1 2013-03-02 11:28:47

解决方案3 0 2013-03-02 12:09:02

镜框

JavaScript上的SSI

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

解决方案4 -1 2013-03-02 11:18:30

解决方案1
1 已采纳 2013-03-02 10:54:31

解决方案2
1 2013-03-02 11:28:47

解决方案3
0 2013-03-02 12:09:02

解决方案4
-1 2013-03-02 11:18:30