在 html 文件中加载独立的 html 文件

Question

我正在使用 jQuery mobile 进行开发，它有一个多页模板，如下所示。 感觉在同一个html里面写html内容很臃肿。

因此，我想将不同 html 中的内容分开并包含独立的 html 页面。它应该经过移动浏览器验证。这方面的最佳做法是什么以及如何做到这一点？

注意：我不希望服务器端脚本（例如：PHP）解决这个问题。它应该只在客户端完成，没有任何模板引擎。类似于 angularJS ng-include.

我所期望的示例

<div data-role="page" id="foo1">
    <html-include src="foo1.html"></html-include>
</div>

移动 html 多页

<div data-role="page" id="foo1">
    <!-- Content 1 here -->
</div>

<div data-role="page" id="foo2">
    <!-- Content 2 here -->
</div>

<div data-role="page" id="foo3">
    <!-- Content 3 here -->
</div>

Answer 1

<div data-role="page" id="foo1" data-url="foo1.html">

</div>

并像这样使用javascript：

$('[data-url]').each(function (k,elem){
    $(elem).load(elem.data('url'));
});

这将找到所有具有 data-url 作为属性的元素，并在 AJAX 中加载该页面，获取接收到的 html 并将相应的 html 元素放入其中。