我有一个非常简单的HTML双页演示，它说明了jQuery Mobile 1.1.0中一个非常令人困惑的行为。 （真正的应用程序要复杂得多，但我能够“大规模”简化问题。）
Page 1由一个单独的href组成，可以跳转到第2页。如果Page 1 NOT 包含jQuery Mobile 1.1.0，我们可以单击链接并显示第2页，没有错误。但是，如果第1页包含jQuery Mobile 1.1.0，则单击第1页中的链接会生成一个Page，它是第1页和第2页中HTML的组合！也就是说，第1页被保留，并且第2页被“合并”到其中。我已尝试使用常规版本和缩小版本，但结果相同。这两个页面就像HTML页面一样简单，因此下面的示例应该很容易重现。这是与Tomcat 5.5一起运行的（如果它很重要，那就是在Eclipse之外进行管理和管理）。两个HTML文件和两个jQuery Mobile文件都放在服务器文档根目录下的文件夹中。 （下面的浏览器输出是通过Tomcat运行的，但我刚尝试通过直接从Page1.html文件启动浏览器 - 根本没有涉及服务器 - 并且问题仍然存在，因此可以在不涉及服务器的情况下重现。）
以下显示了Page1和Page 2的文件内容，以及桌面Firefox浏览器中的HTML（在Firebug中）。
* 第1页来源HTML：
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.min.js" ></script>
</head>
<body >
<a href="Page2.html">Click for Page 2</a>
</body>
</html>
在浏览器中生成第1页HTML：
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page1.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 521px;">
<a href="Page2.html" class="ui-link">Click for Page 2</a>
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body></html>
第2页来源HTML：
<!doctype html>
<html lang="en">
<head></head>
<body >
This is from PAGE 2 BODY!!!
</body>
</html>
导致浏览器中的第2页HTML：
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page2.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-fade"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active fade out" style="min-height: 521px; height: 522px;">
<a href="Page2.html" class="ui-link">Click for Page 2</a>
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" data-url="/OpsServer/DemoBadJQM/Page2.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c">
This is from PAGE 2 BODY!!!
</div></body></html>
请注意，第1页包含jQuery Mobile：
“第2页”，没有内容，包含第1页的内容。
“第2页”包含来自第1页的href和“loading”元素。
“第2页”最后包含HTML文件中的简单文本。
单击第1页中的链接所产生的页面似乎是第1页，并附加了第2页。从第1页删除jQuery Mobile，问题就消失了。这纯粹是一种猜测，但jQuery Mobile在下一页被提取时显示“加载”消息，并且看起来这样做的行为会以某种方式阻止浏览器“处置”第1页，而是合并传入的页面。与之前的第1页。
有谁可以解释这里发生的事情？
感谢。
答案 0 :(得分：1)
使用rel =“external”和第1页中的href解决了这个问题。
答案 1 :(得分：0)
这可能已过时但我刚刚遇到了类似的事情。看起来原因是因为jQuery Mobile将获取页面，将其加载到DOM中，然后像幻灯片一样在页面之间进行转换。我假设您的可视区域足以容纳页面，甚至没有尝试在页面之间滑动。
我们的情况是我们有一些页面，jQuery Mobile显式加载，有些没有，而那些没有以某种方式获得Mobile库的功能。
jQM将自身和其他页面加载到内存中，以便它可以减少网络请求的数量，并且还能够在页面之间很好地转换。您还可以告诉它在您加载第一页后在后台预加载图像和页面。
与常规html页面相比，这是一个略有不同的野兽。试着考虑尽可能少的网络请求优化网站。