即使我没有要求,jQuery mobile也会将页面加载到DOM中

时间:2011-09-30 01:28:04

标签: jquery iphone jquery-mobile back-button

以下是该方案:

(fyi,在下面,当我说'window.location = ...'时,它是由一个按钮点击触发)

我有三页:1.html,2.html,3.html。我按照以下方式导航:

1.html --- window.location="2.html" ---> 2.HTML

2.html --- <a href="3.html" /> ---&gt; 3.html

        click Back button

2.html --- window.location="1.html" - &gt; 1.html

在最后一步1.html加载但是2.html的内容被加载到DOM中替换1.html的内容所以我在1.html但是看到2.html的内容。

发生了什么事?为什么jQuery mobile认为必须加载2.html的内容?

我很确定它与历史记录和后退按钮有关。如果我只是在1.html和2.html之间导航而不使用Back按钮,它就可以了。

更新以下是代码http://jsfiddle.net/x6bxN/要重现,您需要从HTML框中获取代码并将其分成三个单独的文件。

4 个答案:

答案 0 :(得分:3)

看起来正在发生的事情是你在jQM范围之外导航,但1.html位于location.hash。

  

独立于点击发生的哈希更改,例如用户时   单击后退按钮,通过hashchange事件处理,   使用Ben Alman的hashchange绑定到window对象   特殊事件插件(包含在jQuery Mobile中)。当哈希改变时   发生(以及第一页加载时)hashchange事件   handler会将location.hash发送到$ .mobile.changePage()   函数,它反过来加载或显示引用的页面。

我假设location.hash在加载时具有初始的1.html,但在使用window.location导航到新页面时不跟踪新页面。由于您使用的是浏览器后退按钮,因此jQM使用最后一个跟踪的位置,在您的情况下为1.html。

如果您需要跟踪位置,我建议您使用jQM的$.mobile.changePage()。 有关jQM的更多信息可以在文档中找到导航:

答案 1 :(得分:0)

如果你想让jQuery mobile处理历史记录和后退按钮,你需要使用$ .mobile.changePage来改变页面(而不是window.location = ..)。

此处有更多信息:http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html

答案 2 :(得分:0)

您是否尝试在链接上专门设置data-ajax =“false”?或者rel =“external”,尽管只有在你想要改变到另一个域时才会使用它。

如果你没有设置任何一个,我担心JQM劫持。

尝试使用data-ajax =“false”。

实际上我对常规JQM-Ajax链接有类似的问题。我希望通过Ajax加载页面,但如果我喜欢这样:

  • 转到第1页
  • 转到page2a
  • 转到page2b =重新加载page1 ...

非常烦人,我已经在Github上提交了一个问题,但由于你不想使用Ajax,你应该没问题。

让我知道它是否有效。

答案 3 :(得分:0)

一个疯狂的猜测。你没有将css类ui-page-active硬编码到.ui-page元素中吗?因为这会导致两个页面出现。