jQuery 移动页面导航行为答案

【问题标题】：jQuery mobile page navigation behaviourjQuery 移动页面导航行为
【发布时间】：2011-06-24 02:19:44
【问题描述】：

我使用 jquery mobile 设置了一个非常简单的 .NET MVC3 项目，用于渲染到移动设备。

我只有一页...

www.mydomain.com/landingpage

在这个页面上我有一个指向另一个页面的链接：

www.mydomain.com/homepage

我的问题是，登陆页面的链接工作正常 - 正确加载、动画和返回内容。

但是一旦在主页上，所有主页链接都不再起作用。主页包含大约 3 个不同的 jquery 移动“页面”，并且尝试链接到它们不起作用。这是由于哈希格式，它仍然显示类似于：

www.mydomain.com/landingpage#homepage

所以当链接生成时，它看起来像这样：

www.mydomain.com/landingpage#homepage

然后当我链接到与此类似的其他页面之一时：

a href="#homepage2">Homepage 2</a>

点击链接将用户带回初始登录页面，并将 URL 更新为类似于以下内容：

www.mydomain.com/landingpage#homepage2

但我相当肯定它应该看起来更像这样：

www.mydomain.com/homepage#homepage2

我可以通过在第一个链接上使用 rel="external" 使其正常工作，但我想避免这种情况，因为它会重新加载页面并且您会丢失页面过渡动画等。

任何想法都非常感谢:)

【问题讨论】：

你用的是哪个版本的jqm？
所以基本上你有两个单独的文件。登陆页面.aspx 主页.aspx？同时，让我为您举一个例子。
是的，没错。谢谢
嗯。在测试了自己之后。我从主页发现-> homepage2（在同一个html中）不会有任何问题。我的问题只有在我这样做时才会出现。 loginpage --> homepage --> homepage2 我猜是从landingPage转到主页时出了点问题。

标签： jquery html asp.net-mvc jquery-mobile

【解决方案1】：

在您的目标网页上，在指向主页的链接上设置 rel="external"。这将禁用动画，但主页上的 ajax 导航将正常工作。

【讨论】：

是的，我可以使用此方法使导航正常运行，但是我想知道是否有一种方法可以使用相同的 ajax 实现链接到同一域上的不同页面所以动画等得到维护。我可以使链接正常工作，但是一旦加载其他页面，此页面上的 ajax 链接将不再正常工作。到目前为止听起来不太可能，不过感谢您的回复。

【解决方案2】：

对于遇到同样问题的任何人，这为我解决了问题：

我在每个 jQuery 移动“页面”元素（带有 data-role="page" 的 div）上手动设置了 data-url 属性。反过来，这会在回发时强制刷新页面的 URL 哈希。

不确定确切原因，但我有一种感觉，因为它正在回发到同一页面但服务器返回的是不同的页面，URL 哈希有点混乱。

所以只需手动正确设置 data-url 属性，当页面回发并加载下一页时，将更新正确的 URL 哈希。

例如：

<div data-role="page" id="pageId" data-url="/Page/URL/Here/">

解释起来有点棘手，所以如果有人需要帮助，请随时直接与我联系！ RC2 自从我最初发布后就已经发布了，所以我也不确定其中包含哪些更改。

【讨论】：

【解决方案3】：

我相信这是您加载外部页面时的问题。当您尝试加载外部页面并从那里尝试加载内部页面时，jquery mobile 将假定您正在加载的内部页面已经在 DOM 中，而不仅仅是因为当您加载具有多个只有前 1 个的外部页面时，您尝试链接到的内部页面不存在。

以及你得到这个的原因

www.mydomain.com/landingpage#homepage2

不是这个

www.mydomain.com/homepage#homepage2

是因为landingpage 是第一个加载的页面。子序列页面全部加载到 DOM 中，所以 jqm 假设它已经在 DOM 中，所以它会尝试加载。

目前我认为唯一的解决方法是不要将多个 jqm 页面放在一个文件中并将它们作为外部文件加载。

例如

landingpage.html 加载 --> homepage.html

homepage.html 加载 --> homepage2.html

【讨论】：

貌似没有解决办法，感谢 Jin 的努力 :)

【解决方案4】：

（你可能已经解决了你的问题，如果下面有帮助的话）

我现在正在使用 RC2（刚刚发布），他们在 Beta3 中围绕该区域进行了重大更改，我正在使用普通链接，例如：-

它对我来说很好用。虽然我还在标题中将 PushStateEnabled 保持为 True：

  <script type="text/javascript">
          $(document).bind("mobileinit", function () {

              $.mobile.ajaxEnabled = true;
              $.mobile.pushStateEnabled = true;
          });
        </script>

【讨论】：

【解决方案5】：

<script type="text/javascript">
    $(document).bind("mobileinit",
        function(){ 
            $.extend( $.mobile , { ajaxEnabled: false }); 
        }
    );
</script>

将此脚本添加到布局页面（或您引用 jQuery 脚本的任何位置。

这应该可以解决问题，但是，它只是禁用了 ajax。这将需要更多的研究来找出我们如何克服在 url 中出现 # 而仍然启用 ajax 的问题。

【讨论】：