javascript - 在没有服务器端资源的情况下将 HTML 注入(inject) HTML 文档。 (离线)

Question

我已经搜索了各种方法来从不需要服务器端事件的外部源将简单的 html 注入(inject)到 .html 文件中。我找到了一些答案，但它们似乎都不是“正确的”或最佳实践。考虑这种情况。假设我们正在构建一个 20 页的网站。我希望页脚出现在所有页面上并且在所有 20 页上都相同。这是一个静态的、通用的 HTML 网站。我想把

<footer>
<whatever></whatever> <!-- Yes, I know whatever is not a valid tag. Just for demo. -->
</footer>

标记为 footer.html(或任何扩展名)，这样我就可以将它添加到页面底部。然后，当我需要进行更改时，我只需更改一个 footer.html(或其他...)文件。

使用 jquery 这很简单。

$('whatever').html('content');

哪个有效...但需要加载 jquery。如果我们使用 Bootstrap 或 Foundation 通常不是问题，因为它们以任何方式需要它，并且您可以在本地运行两者所需的 js 和 css 文件。

我们可以试试这个...

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

还有那种作品。您必须将样式表添加到 whatever.html 文件，这样效率不高。

document.write

是一匹死马。

为了清楚起见，我们假设将它放在服务器上是不可能的。

有没有人有像这样简单但有效的解决方案？

提前感谢任何建议!

Answer 1

看看一个名为 AngularJS 的框架.它具有模板引擎以及其他功能，例如模型绑定(bind)和编写可重用的 Web 控件(称为指令)。

强烈推荐。

还有一个框架叫Polymer这只是一个可以满足您需求的模板引擎。