HTML 多级模板（仅限 HTML 和 JS）答案

【问题标题】：HTML multi-level templating (HTML and JS only)HTML 多级模板（仅限 HTML 和 JS）
【发布时间】：2014-02-11 21:33:36
【问题描述】：

您好，我想做一些非常简单的事情：一个仅使用 HTML 和 JS 的多级模板系统。

我只想用 HTML 来做，我尝试了 object 和 embed 标签，但我不能让它正常工作（embed 不显示并且 object 使用 and 生成一个新的 HTML 文档，而且它非常难看)。

所以，接下来我尝试了 handlebars.js，但我没有设法使用它将 HTML 从一个文件放入另一个文件。

我只想将页面的不同组件分成不同的类似 HTML 的文档（但不是完整的 HTML 有效文档，只有一个只有标题，一个只有导航菜单，等等）。然后在“第 2 级”上，我将有一个“结构”HTML 正文文档，它可以根据需要排列前面的元素（一个结构可以在左侧有一个菜单，在右侧有一个内容和一个页脚，另一个会有菜单顶部，全尺寸内容和标题等，就像CMS的不同主题一样简单得多）。最后在“3 级”上，我的“真实”页面将使用“结构”模板，然后我想我应该使用把手之类的东西将内容、标题等传递到 2 级，然后再传递到 1 级。

那么，有什么简单的方法可以做到这一点吗？无需重写整个 JS 库：P 如果您认为 handlebars.js 适合我的需要（但我真的不需要动态部分，只需要每个页面的标题和内容，也许可以处理当前位置管理菜单和面包屑的网站），您能告诉我如何使用它来将 HTML 从一个文件包含到另一个文件吗？

非常感谢:)

编辑

经过一番挣扎，我只用 jQuery 就很容易做到了。我真的不熟悉javascript（但我还是有点惭愧）这是要走的路：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function() {
                $("body").load("structure.html", function() {
                    $("nav").load("nav.html");
                    $("section").load("section.html", function() {
                        $("section hgroup h1")[0].innerHTML = document.title;
                    });
                    $("footer").load("footer.html");
                });
            });
        </script>
    </body>
</html>

结构.html 仅包含空标签，按照您希望的顺序排列，如下所示：

和 section、nav 和 footer.html 继续各自标签内的内容。

【问题讨论】：

似乎codegolf.stackexchange.com 更适合这样的问题（甚至不确定）

标签： html templates layout client-side handlebars.js

【解决方案1】：

简单地使用几个 iframe 不是更容易吗？比如：

<html>
    <body>
        <iframe src="nav.html"/>
        <iframe src="content.html"/>
    </body>
</html>

还是我误解了你的问题？

【讨论】：

但是这个问题，就像对象一样，是它会在页面内插入一个完整的文档，如下所示：<!DOCTYPE html> <html lang="en"> <head>...</head> <body> <object data="nav.html" type="text/html"> #document <html> <head></head> <body> nav body </body> </html> </object> </body> </html> 这是错误的。用 iframe 试过，效果一样。
为什么错了？为什么拥有完整的文档会成为问题？
在另一个文档中包含完整文档是错误的，不是吗？必须只有一个，必须只有一个，否则页面无效。使用 iFrame 时，我在主页面中嵌套了一整页。
虽然一个文档可能只有一个有效的根节点是真的，但 iframe 引入了一个嵌套的 browsing context，其中包含一个 单独的 文档。因此，使用 iframe 不会使 html 失效。