如何重复使用小的html标记？

Question

我正在开发使用HTML 5编码的独立JavaScript应用程序。 它有近50-60个html页面，包括重复标记，如页眉，页脚和导航。 但如果我必须在标题中进行更改，那么我必须在56-60页进行更改。

有没有使用可重复使用的html标记的解决方案，所以如果我在一个页面中进行了更改，它会反映到其他页面？

我甚至无法使用php。

Answer 1

准备一个javascript功能。写下html elements到javascript或jquery功能。在page load event中运行它。并通过div在html中调用该函数。

将此javascript function放在单独的.js文件中。并在任意位置调用此js文件。只需将div放在html页面中的任意位置即可。

请参阅此jsfiddle DEMO

我希望这个演示在这种情况下对你有用。

Answer 2

如果您使用的是HTML（.html）页面并且没有Server-Side-Includes选项，那么您可以使用JavaScript模板（这并不太难）。

第二个选项：使用iframe。

在common_layout.js中编写整个javascript代码 使用该div的id添加每个语句，并使用主布局添加此文件。

$( document ).ready(function() {
    $('#header').html('<b>Header</b><ul><li>First Link</li><li>Second Link</li></ul> ');
});

更新：TutsPlus最喜欢的帖子之一：Best practices when working with JS Templates

Answer 3

如果您刚开始使用此应用程序。您可以考虑使用客户端Java脚本框架，如AngularJS。维护代码并解决这些微不足道的问题要容易得多。

Answer 4

您可以使用object标记，如下所示：

<object name="header" type="text/html" data="header.html"></object>