0

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

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

在网站上，我有以下布局

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

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

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

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

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

4

4 回答 4

1

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

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

工作演示

代码：

<!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>
于 2013-03-02T10:54:31.730 回答
1

如果您的 Web 应用程序将托管在支持服务器端包含的 Web 服务器上（例如 Apache），您可以添加<!--#include virtual="/header.html" --> 根据您的 Web 服务器，您可能需要先启用 SSI（Options +Includes在 apache 上的 .htaccess 中）

于 2013-03-02T11:28:47.920 回答
0

框架

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

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

基于 JavaScript 的 SSI

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

SSI 声明的格式如下：
<!--#include virtual="../quote.txt" -->

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 等价物的引用正在逃避我，所以我将在重新定位它时更新我的​​答案。

于 2013-03-02T12:09:02.437 回答
-1

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

于 2013-03-02T11:18:30.750 回答