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

Question

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

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

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

我期望的样本

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

移动网页多页

<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 元素放入其中。