即使我不要求 jQuery mobile 将页面加载到 DOM 中

Posted 2023-05-09

技术标签:

【中文标题】即使我不要求 jQuery mobile 将页面加载到 DOM 中【英文标题】：jQuery mobile loads a page into DOM even when I don't ask it to 【发布时间】：2011-11-28 03:19:42 【问题描述】：

这里是场景：

（仅供参考，在下文中，当我说“window.location=...”时，它是由点击按钮触发的）

我有三个页面：1.html、2.html、3.html。我按以下方式导航：

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

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

        click Back button

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

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

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

我很确定它必须与历史和返回按钮有关。如果我只是在 1.html 和 2.html 之间导航而不使用后退按钮，它就可以工作。

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

【问题讨论】：

也许我不理解你想要做什么。因为我无法重现它。我试图重现你描述的东西，但它对我有效。这是我的示例代码。注意：这是 3 个单独的 HTML 文件，我只是将它们全部粘贴到同一个 pastebin 页面中。 pastebin.com/JkneaERE 你可以发布更多代码吗？也许jsfiddle.net 因为我想看看你是如何在页面之间导航的 @PhillPafford 这是 jsfiddle jsfiddle.net/x6bxN 的链接我从所有三个文件中取出 html 并将它们插入到 HTML 框中。您希望将它们放入三个单独的文件中重现。 span> 我遇到了同样的行为，但根本没有使用 window.location ...这仅在我的 android 上；如果我在Web浏览器中这样做，则显示正确。我将AjaxEnabled设置为False，但没有效果。 span> 【参考方案1】：

看起来正在发生的事情是您在 jQM 范围之外导航，但 1.html 在 location.hash 中。

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

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

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

http://jquerymobile.com/demos/1.0rc1/docs/pages/page-navmodel.html http://jquerymobile.com/demos/1.0rc1/docs/api/events.html http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html

【讨论】：

location.hash 始终为空，因为 url 在任何链接中都没有 # 符号。一旦您离开 1.html，jQM 就会将此位置添加到 urlHistory。我怀疑由于您没有使用 jQM 来跟踪哈希导航，因此点击后退按钮会在 urlHistory 中找到 1.html。您可以在转换到页面之前将自定义导航推送到 location.hash，这可能有助于解决问题我实际上会尝试使用 $.mobile.changePage() 方法，但我需要正确连接事件。我知道我应该使用 pageinit 而不是 ready 事件，但是，我对如何连接这个事件有点困惑。我在这里有一个不同的问题***.com/questions/7729729/… 你是对的，因为我在加载页面时在 location.hash 中没有看到 1.html，但我确实看到它已添加到 urlHistory 堆栈中：jsfiddle.net/ant2U/20【参考方案2】：

如果您希望 jQuery mobile 处理历史记录和返回按钮，您需要使用 $.mobile.changePage 来更改页面（而不是 window.location=..）。

更多信息在这里：http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html

【讨论】：

我知道jQuery移动功能切换页面。我不想使用它们，因为它破坏了其他功能。因此我使用的是window.location。我很困惑为什么 jQuery mobile 试图“劫持”我的页面。这显然与历史记录和后退按钮有关。【参考方案3】：

您是否尝试在链接上专门设置 data-ajax="false"？或者 rel="external"，虽然这应该只在您想更改到另一个域时使用。

如果你不设置任何一个，恐怕JQM劫持。

试试它是否适用于 data-ajax="false"。

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

转到第 1 页转到第2a页转到 page2b = 重新加载 page1...

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

让我知道它是否有效。

【讨论】：