使用 jQuery Mobile 的 replaceState 更新 URL 部分页面 AJAX 刷新
Using replaceState with jQuery Mobile to update URL on partial page AJAX refresh
我正在使用 jQuery Mobile 1.4.2，并且在我的应用程序中有一些页面，我在其中使用 AJAX 刷新部分页面内联（不执行完整的 "page navigate" 在 jQM 中）。我想对当前 URL 进行更新而不添加历史记录点来跟踪这些 AJAX 操作的状态，这样如果用户导航到子页面然后返回，他们将回到他们离开的地方（我们不在 DOM 中缓存页面）——如果他们 copy/paste 和 URL 进入新的浏览器，它也将看起来完全一样。
history.replaceState 非常适合这个，但我不知道如何将它与 jQuery Mobile 正确集成。如果我在执行 AJAX 操作时调用它，URL 会正确更新。但是，如果我导航到一个子页面，然后返回，虽然浏览器地址栏显示正确的 URL（经过修改），但 jQuery 移动脚本似乎只获取 页面原创 URL，所以内容与预期不符。
我相信 jQM 使用自己的历史记录 API/stack，这是它存储原始页面的地方 URL。那里有我可以使用那个包装 replaceState 的任何 API，或者有没有办法通知 jQM 的历史页面 URL 已经更改 而无需 添加历史点？我在文档中看到 $.mobile.navigate()，但在试验之后，它似乎总是添加一个新的历史点，在这种情况下我不希望这样。
我相信我已经找到了一个可行的解决方案，尽管它可能有点脆弱。在调试中，似乎 jQuery Mobile 使用附加到包含 url 属性 的历史记录的状态对象，当使用兼容 popstate 的浏览器时，它们是如何确定 URL 返回。因此，仅使用 url 参数调用 history.replaceState 是不够的。还必须提供至少包含 url 属性.
的状态对象
似乎有一个内部 jQuery 移动辅助函数，它将接受 URL，将其正确映射到根，创建状态对象，然后调用 history.replaceState。这个 API 是 $.mobile.navigate.navigator.squash(newUrl);.
虽然我通常不喜欢使用内部 APIs，但在这种情况下，它似乎工作得很好！编写您自己的此方法版本来执行等效行为可能也很简单。希望这对处于相同情况的其他人有所帮助。
我也遇到了这个问题，你的解决方案是最接近预期结果的。问题是 $.mobile.navigate.navigator.squash(newUrl); 会在 url 中多加一个 # 不能被接受。
经过多次尝试和搜索，我设法在不破坏 "BACK" 行为的情况下使用 history.replaceState 函数。秘诀是在 stateObj object:
中使用绝对路径
var myurl = "https://example.com/page.php?id=123";
var stateObj = { url: myurl }
history.replaceState(stateObj, "", myurl);
希望对其他人也有用。
我正在使用 jQuery Mobile 1.4.2，并且在我的应用程序中有一些页面，我在其中使用 AJAX 刷新部分页面内联（不执行完整的 "page navigate" 在 jQM 中）。我想对当前 URL 进行更新而不添加历史记录点来跟踪这些 AJAX 操作的状态，这样如果用户导航到子页面然后返回，他们将回到他们离开的地方（我们不在 DOM 中缓存页面）——如果他们 copy/paste 和 URL 进入新的浏览器，它也将看起来完全一样。
history.replaceState 非常适合这个，但我不知道如何将它与 jQuery Mobile 正确集成。如果我在执行 AJAX 操作时调用它，URL 会正确更新。但是，如果我导航到一个子页面，然后返回，虽然浏览器地址栏显示正确的 URL（经过修改），但 jQuery 移动脚本似乎只获取 页面原创 URL，所以内容与预期不符。
我相信 jQM 使用自己的历史记录 API/stack，这是它存储原始页面的地方 URL。那里有我可以使用那个包装 replaceState 的任何 API，或者有没有办法通知 jQM 的历史页面 URL 已经更改 而无需 添加历史点？我在文档中看到 $.mobile.navigate()，但在试验之后，它似乎总是添加一个新的历史点，在这种情况下我不希望这样。
我相信我已经找到了一个可行的解决方案，尽管它可能有点脆弱。在调试中，似乎 jQuery Mobile 使用附加到包含 url 属性 的历史记录的状态对象，当使用兼容 popstate 的浏览器时，它们是如何确定 URL 返回。因此，仅使用 url 参数调用 history.replaceState 是不够的。还必须提供至少包含 url 属性.
似乎有一个内部 jQuery 移动辅助函数，它将接受 URL，将其正确映射到根，创建状态对象，然后调用 history.replaceState。这个 API 是 $.mobile.navigate.navigator.squash(newUrl);.
虽然我通常不喜欢使用内部 APIs，但在这种情况下，它似乎工作得很好！编写您自己的此方法版本来执行等效行为可能也很简单。希望这对处于相同情况的其他人有所帮助。
我也遇到了这个问题，你的解决方案是最接近预期结果的。问题是 $.mobile.navigate.navigator.squash(newUrl); 会在 url 中多加一个 # 不能被接受。
经过多次尝试和搜索，我设法在不破坏 "BACK" 行为的情况下使用 history.replaceState 函数。秘诀是在 stateObj object:
var myurl = "https://example.com/page.php?id=123";
var stateObj = { url: myurl }
history.replaceState(stateObj, "", myurl);
希望对其他人也有用。