jQuery Mobile 多页模板请求错误页面答案

【问题标题】：jQuery Mobile multi-page template requests wrong pagejQuery Mobile 多页模板请求错误页面
【发布时间】：2011-10-11 22:01:17
【问题描述】：

几周以来，我一直在玩 jQuery 和 jQuery mobile。我有一个非常简单的例子，它似乎表明了一个非常讨厌的 jQuery 移动错误，所以我想看看我做的事情是否有问题。

发生的事情是我有一页（称为 index2.html）用作主页。然后我有第二个页面 (dc2.html)，这是 webapp 的主要功能所在的位置。 dc2.html 是一个多页模板；即它包含两个声明 data-role="page" 的 div。正如您可能猜到的那样，在 dc2.html 中，我提供了从第一个“页面”div 到第二个“页面”div 的链接，反之亦然。

如果我直接在浏览器中手动输入 dc2.html 的 URL，则此交互可以正常工作。但是，如果我从 index2.html 开始并按照其指向 dc2.html 的链接，然后单击/点击链接以加载第二个 'data-role="page"' div，则浏览器会改为对 index2 进行网络调用.html 并再次加载！

如果重要，URL 类似于 www.XXXX.com/software_utilities/mobile/index2.html 和 www.XXXX.com/software_utilities/mobile/dc2.html，因此它们位于嵌套文件夹中，尽管它们都在同一个嵌套文件夹中。

这里是 index2.html 的代码（当然是为了演示这个问题的基本要素）：

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>

<!-- Start of first page -->
<div data-role="page">

    <div data-role="header">
            <h1>Utilities</h1>
    </div><!-- /header -->

    <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="d">
                    <li><a href="/software_utilities/mobile/dc2.html">DC</a></li>
            </ul>
    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>

以及 dc2.html 的代码：

<!DOCTYPE html>
<html>
    <head>
    <title>Date Format</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"> </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>

<!-- Start of main page -->
<div data-role="page" id="main">
    <div data-role="header">
            <a href="index2.html" data-direction="reverse" data-role="button" data-inline="true">Home</a> <h1>Page One</h1>
    </div><!-- /header -->

    <div data-role="content">
                            <a href="#page_two">Click/tap me to go to page 2</a>
    </div><!-- /main content -->
</div><!-- /main page -->

<div data-role="page" id="page_two">
    <div data-role="header">
            <a href="#main" data-direction="reverse" data-role="button" data-inline="true">Back</a> <h1>Page Two</h1>
    </div><!-- /header -->
</div><!-- /dateformat page -->

</body>

</html>

任何见解将不胜感激；谢谢！

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

我没有尝试过您使用的流程，但是我相信当您单击 index2.html 上的链接以访问 dc2.html 上的页面时，只会将第一个 <div data-role="page"> 添加到 DOM 中。因此，当您单击 dc2.html 中第二个伪页面的链接时，它在 DOM 中不存在（即没有 id 为“page_two”的 div）。

尝试将所有三个页面放在一个文件中，或者将它们拆分为单独的文件。您还可以将rel="external" 添加到 index2.html 上的链接中，这将禁用 AJAX 导航（和页面转换动画），但是浏览器随后会加载 dc2.html 上的两个伪页面。

【讨论】：

嗯，是的，我想我明白你在说什么了。当我从 index2 开始，然后使用 AJAX 导航“链接到”dc2 时，实际上 dc2 的主页 div 被插入到 index2 的 DOM 中。因此，当我单击新 dc2 div 中的链接时，浏览器实际上是在搜索 index2.html 的 DOM（而不是 dc2.html 的 DOM）来查找#page_two。没有找到具有该 ID 的 div，我猜它只是在有效地重新加载自己。
（续）这对我来说仍然是一个错误的实现——为什么#page_two div 也不能加载到 index2 的 DOM 中？——但我对此无能为力这点。无论如何，至少我知道发生了什么，所以谢谢。我会想办法解决的。
一种常见的方法是将每个 <div data-role="page"> 放在一个单独的 HTML 文件中，并通常将它们相互链接 (<a href="some_page.html">)，这样用户可以深层链接到您的网站，并且仍然获得 JQM 经验。
贾斯珀 - 这是有道理的。这种方法的问题在于，在我的“真实”应用程序中，page_two 表示一组单选按钮，用户可以从中选择一个。我想在 dc2.html 的上下文中保持该状态（即用户最近的选择）。我知道我可以使用某种本地存储在 dc2.html 和“page_two”之间来回传输该状态，但我的目标是将其保持在相同的页面上下文中。