4

我正在使用 jQuery Mobile 构建一个移动网站，我的一位测试人员在使用 jQuery 内置的标准页面加载功能重新加载、深度链接或为我加载到 DOM 中的任何页面添加书签时指出了一个问题移动的。我一直在查看文档、论坛帖子、github 错误列表等以寻找解决方案，但我对自己可能做错的事情束手无策。我已经编译了一个非常基本的两页示例来演示我所看到的。

首先，我的示例站点根文件夹（即/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？我错过了什么？

4

4 回答 4

3

好的，根据 Kane 的建议，我已经修改了我的示例代码，现在它似乎可以按我的意愿工作。

我的示例站点根文件夹 (ie /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/.

希望这些信息可以为其他人节省几个小时敲击键盘的时间。

于 2012-02-02T21:36:32.197 回答
1

非常感谢您提供此解决方案。它给了我一些错误，所以我对其进行了一些简化，现在它似乎对我有用：

/**
 * fixes the problem where a subpage in jquerymobile will lose its back button after a refresh. Instead a refresh takes you back to the top page
 * http://stackoverflow.com/questions/9106298/jquery-mobile-breaks-when-reloading-deep-linking-bookmarking-pages-added-to
 */
if(window.firstload === undefined && /#.+$/.test(window.location.href)) {
    window.location = window.location.href.replace(/#.+$/, '');
}

希望对遇到此问题的其他人有所帮助。

此致

威尔·费雷尔

于 2012-12-06T23:15:45.727 回答
1

最简单的方法是重定向到主页：示例子页面：login.htm

<script type="text/javascript">
    window.location="index.htm";
</script>

<div data-role="page" id='login'>
    Ur sub page
</div><!-- /page -->

js 代码只会在页面重新加载时被触发，因为只有data-role="page"的代码是通过 ajax 插入的。

于 2012-12-29T11:22:03.230 回答
0

我有类似的情况，我使用一些服务器端处理来确定是为新请求呈现我的站点模板中的内容，还是为来自 ajax 的请求单独呈现内容。

基本上，我只是在我的 ajax 请求中添加一个名为“partial”的帖子或获取变量，并决定是否包含模板。

如果您不想做任何服务器端工作（这是 IMO 的理想方法），那么我能想到的唯一另一种方法是在每个页面上添加类似这样的内容：

if( window.firstload === undefined )
{
    // Add script tags and stylesheets to the page and potentially load
    // your site template into the DOM

    window.firstload = true;
}

当第一页加载时，变量 window.firstload 将是未定义的，因此您可以将所有脚本标签和样式表添加到您的页面。然后在通过 ajax window.firstload 的后续页面加载将设置为 true ，这样就不会再次发生。

于 2012-02-02T02:59:33.633 回答