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

Question

我正在使用 jQuery 移动设备进行开发，它有一个多页模板，如下所示。感觉在同一个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元素.

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

Load standalone html file in html file

html

javascript

jquery

jquery-mobile