javascript - 使用replaceState和jQuery Mobile来更新部分页面AJAX刷新上的URL

Question

我正在使用 jQuery Mobile 1.4.2，并且在我的应用程序中有一些页面，我使用 AJAX 内联刷新部分页面(不在 jQM 中执行完整的“页面导航”)。我想更新当前 URL，而不添加历史记录点来跟踪这些 AJAX 操作的状态，这样，如果用户导航到子页面，然后返回，他们将回到他们离开的地方(我们不在 DOM 中缓存页面)——如果他们将 URL 复制/粘贴到新浏览器中，它看起来也会完全相同。

history.replaceState 非常适合此目的，但我不知道如何将其与 jQuery Mobile 正确集成。如果我在执行 AJAX 操作时调用它，URL 会正确更新。但是，如果我导航到子页面，然后返回，当浏览器地址栏显示正确的 URL(经过修改)时，jQuery Mobile 脚本似乎只获取该子页面的原始 URL。页面，因此内容不符合预期。

我相信 jQM 正在使用自己的历史 API/堆栈，这是它存储原始页面 URL 的地方。那里有没有我可以使用的 API 来包装 replaceState，或者有没有办法通知 jQM 的历史页面 URL 已更改而不添加历史点？我在文档中看到 $.mobile.navigate() ，但在尝试它之后，它似乎总是添加一个新的历史点，这是我在这种情况下不希望出现的情况。

Answer 1

我相信我已经找到了一个可行的解决方案，尽管它可能有点脆弱。在调试中，jQuery Mobile 似乎使用附加到历史记录的状态对象，其中包含 url 属性，当使用 popstate 兼容浏览器时，这就是它们确定要返回到哪个 URL 的方式。因此，仅使用 url 参数调用 history.replaceState 是不够的。还必须提供一个至少包含 url 属性的状态对象。

似乎有一个内部 jQuery Mobile 辅助函数，它将获取 URL，将其相对于根正确映射，创建状态对象，然后调用 history.replaceState。此 API 为 $.mobile.navigate.navigator.squash(newUrl);。

虽然我通常不喜欢使用内部 API，但在这种情况下，它似乎工作得很好!编写您自己的此方法版本来执行等效行为可能也很简单。希望这可以帮助处于相同情况的其他人。