默认情况下，如果您使用 jQuery Mobile 的 ajax 导航来加载多页模板 html 文件，它不起作用，只会加载第一页。
一种方法是使用rel="external"，但是在手机或平板上看起来不太好......（应该有动画！）
没有更好的方法吗？如何使用 jQuery Mobile ajax 导航完全加载多页模板 html？
【问题讨论】：
标签： javascript jquery html css jquery-mobile
您可以使用
以编程方式将页面加载到 DOM 中pageContainerElement.page({ domCache: true });
DOM 缓存的缺点是 DOM 可能会变得非常大，从而导致某些设备速度变慢和内存问题。如果您启用 DOM 缓存，请注意自己管理 DOM 并在一系列设备上进行全面测试。
这是链接：http://jquerymobile.com/test/docs/pages/page-cache.html
更新 1
您可以将该代码放在一个单独的文件中，即custom-code.js，并在加载 jQuery 之后但在加载 jQuery Mobile 之前将其放在您的标题中。
所以如果你的页面容器看起来像这样：
<div data-role="page" data-theme="a" data-dom-cache="false" class="page blog-post">
您可以将div.page({ domCache: true }); 放在您拉入 jQuery 和 jQuery mobile 的所有页面的头部，它看起来像这样：
// Pull in jQuery
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
// Pull in your custom jQuery Mobile rules/scripts
<script src="../path/to-file/custom-code.js"></script>
// Pull in jQuery Mobile
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
更新 2
上面的代码将缓存该特定页面。如果要将所有页面加载到 DOM 中，请在 custom-code.js 文件中放置此代码并分别指定（每个页面一个实例）要加载到 DOM 中的每个页面：
$.mobile.loadPage( pageUrl, { showLoadMsg: false } );
预取页面自然会创建额外的 HTTP 请求并使用 带宽，因此明智的做法是仅在以下情况下使用此功能 很可能会访问预取的页面。
另外，如果您想预取当前页面上链接到的所有页面，只需在链接中添加data-prefetch。
例如：
<a href="page_2.html" data-prefetch>Link to other page</a>
【讨论】：
data-role="page" div吗？
data-role="pages"？？
默认情况下，jQuery mobile 不会加载多页面模板的所有页面。但是 jQuery Mobile 有 a plugin，它允许您使用 ajax 导航加载多页模板。
【讨论】：