如何重用网页的某些部分（使用div）？

Question

我有几个共享菜单区域的HTML页面。每当我更新菜单区域时（例如，使用新的“突发新闻”），我需要手动更新所有10个页面。

对于框架，它们都指向相同的框架页面，因此我只需要更改一个页面。但我被告知帧很糟糕，我应该使用div。用div做一个简单的方法吗？ （最好没有JQuery或Ajax）

Answer 1

您可以使用iframe。它仍然是一种框架，但你可以避免使用frameset-index-page，如果你将border设置为0，那么适合你的内容甚至看不到边框或滚动条，它的行为就像{{1 }}

div

您应该使用固定的宽度 - 高度来避免滚动条。对我来说，它是最简单的“仅限html” - 解决你的问题。

Answer 2

您可以使用jQuery的load()函数。

您必须在每个页面的头部添加以下内容：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

然后你必须在你想要加载内容的地方添加以下DIV。

<div id="breakingNews"></div>
<script type="text/javascript" src="http://example.com/news.js"></script>

请务必修改news.js文件的链接。

然后，您将在服务器上创建news.js，并添加以下代码：

$('#breakingNews').load('path/to/breakingnews.html');

有关load()的更多信息： http://api.jquery.com/load/

Answer 3

不是很好的解决方案，但如果您真的想要单点菜单定义，请将其包含在包含setMenu函数的脚本中，并在每个页面的头部加载脚本并调用{{1}函数在每个页面的body onload上，然后将菜单设置为div的innerHTML，你在每个页面中特别将其作为菜单占位符包含在内。

Answer 4

如果您尝试避免服务器端解决方案动态生成内容，则客户端模板可能是一种解决方案。

使用ICanHaz.js模板http://icanhazjs.com/，您可以将html存储为对象。然后将它们直接包含在.js文件中，或者为它们发出ajax请求。