我正在使用 jQuery Mobile 构建一个移动网站，我的一位测试人员在重新加载、深层链接到我使用标准页面加载功能加载到 DOM 中的任何页面或为其添加书签时指出了一个问题内置于 jQuery Mobile 中。我一直在查看文档、论坛帖子、github bug 列表等，寻找解决方案，但我对我可能做错的事情束手无策。我编写了一个非常基本的两页示例来演示我所看到的内容。
首先，我的示例站点根文件夹(即 /index.html)中有一个 index.html 页面，如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<!-- main page -->
<div data-role="page" data-theme="b" id="main">
<div data-role="header" data-theme="b">
<h1>Home Page</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="news/">News</a></li>
</ul>
</div><!-- /content -->
</div><!-- /main page -->
</body>
</html>
我在名为“news”的文件夹(即 /news/index.html)中有第二页，如下所示:
<div data-role="page" data-theme="b" data-add-back-btn="true" id="news">
<div data-role="header" data-theme="b">
<h1>News</h1>
</div><!-- /header -->
<div data-role="content">
TODO: page content goes here
</div><!-- /content -->
</div><!-- /#news page -->
所以，这效果很好。 “主页”加载正常。浏览器地址字段显示 http://m.example.com/。
我可以单击“新闻”链接将该页面加载到 DOM 中。浏览器地址字段现在显示 http://m.example.com/news/。这就是我的问题所在。如果您单击浏览器重新加载按钮，/news/index.html 页面会重新加载，但完全缺少主主页上下文，因此没有 jQuery、CSS 或正确的 HTML 文档结构。考虑到 URL 及其文档内容，我希望情况就是如此。但是，当从我的移动网站外部进行深层链接时，我需要指向子页面的链接才能工作。
如果您使用 http://m.example.com/#news/ 链接到子页面，则此方法有效，子页面加载正确，并且浏览器地址字段会自动重写为 http://m.example.com/news/。这样做的问题是，人们需要知道，每当他们为页面 URL 添加书签、推文、电子邮件等时，他们都需要手动编辑 URL。
有没有办法自动将浏览器踢回主页，然后触发子页面的加载，对用户透明，从而正确地重新创建 DOM？我错过了什么？
最佳答案
好的，根据 Kane 的建议，我已经修改了示例代码，现在它似乎可以按我想要的方式工作。
我的示例网站根文件夹(即 /index.html)中的 index.html 页面现在如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript">
if( window.firstload === undefined ) {
window.firstload = true;
}
</script>
</head>
<body>
<!-- main page -->
<div data-role="page" data-theme="b" id="main">
<div data-role="header" data-theme="b">
<h1>Home Page</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="news/">News</a></li>
</ul>
</div><!-- /content -->
</div><!-- /main page -->
</body>
</html>
名为“news”的文件夹中的第二页(即 /news/index.html)现在如下所示:
<script type="text/javascript">
if(window.firstload === undefined) {
for(var i=0, c=0; i < window.location.href.length; i++){
if(window.location.href.charAt(i) == '/') {
c++;
if(c==3) window.location = window.location.href.substr(0,i)
+ '/#'
+ window.location.href.substr(i);
}
}
}
</script>
<div data-role="page" data-theme="b" data-add-back-btn="false" id="news">
<div data-role="header" data-theme="b">
<a href="#main" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse"></a>
<h1>News</h1>
<a href="#main" data-icon="home" data-role="button" data-iconpos="notext" data-transition="fade">Home</a>
</div><!-- /header -->
<div data-role="content">
TODO: page content goes here
</div><!-- /content -->
</div><!-- /#news page -->
现在，在子页面上点击重新加载或深层链接/书签会将访问者弹回主页，然后正确加载到子页面中。在子页面中，重定向生成为 http://m.example.com/#/news/。
希望这些信息能够帮助其他人节省几个小时敲键盘的时间。
关于jQuery 移动 : Breaks When Reloading/Deep Linking/Bookmarking Pages Added to DOM via AJAX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9106298/