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

Question

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

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

Answer 1

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

<iframe style="border-width:0px;" src="news.html"/>

您应该使用固定的宽度 - 高度来避免滚动条。 对我来说，它是最简单的“仅限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函数的脚本中，并在每个页面的头部加载脚本，并在每个页面的body onload上调用setMenu函数，然后设置作为div的innerHTML的菜单，您在每个页面中特别包含作为菜单占位符。

Answer 4

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

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