htmx-禁用hx-push-url = true的DOM的快照

发布于 2025-02-03 16:49:38 字数 529 浏览 3 评论 0原文

根据htmx hx-push-url < /代码>：

HX-PUSH-url属性使您可以将URL推入浏览器位置历史记录。这将创建一个新的历史记录条目，并允许使用浏览器的背部和前方按钮导航。 HTMX快照当前DOM并将其保存到其历史缓存中，并在导航上从此缓存中恢复。

这会导致以前的页面仅进行还原而没有重新加载，如果我删除hx-push-url，导航与用户的期望不符。我的几乎所有页面导航都带有htmx，有时我希望页面重新加载回到返回时。有没有办法使用HTMX实现这一目标？还是我可能会滥用HTMX？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

对你再特殊 2025-02-10 16:49:38

HTMX还没有提供预防这种行为的官方方法。但是，通过一些手动工作，我们可以强迫HTMX进行整页刷新。 HTMX将页面存储在localstorage下的htmx-History-cache键。因此，我们可以使用htmx：PushedIntoHistory事件（〜该页面已保存到历史记录）来完全删除此密钥，从而迫使HTMX向服务器提出新请求。

<script>
document.body.addEventListener('htmx:pushedIntoHistory', (evt) => {
  localStorage.removeItem('htmx-history-cache')
})
</script>

但是，默认情况下，HTMX将提供AJAX请求，而不是全页重新加载。要强制完整的重新加载，我们还需要将RefreshonhistoryMiss设置为true：

<meta name="htmx-config" content='{"refreshOnHistoryMiss":"true"}' />

HTMX does not provide an official way to prevent this behavior, yet. However with a little manual work we can force HTMX to make a full page refresh. HTMX stores the page in the localStorage under htmx-history-cache key. So we can use the htmx:pushedIntoHistory event (~ the page has been saved to the history) to delete this key completely, forcing HTMX to make a new request to the server.

<script>
document.body.addEventListener('htmx:pushedIntoHistory', (evt) => {
  localStorage.removeItem('htmx-history-cache')
})
</script>

However, by default HTMX will make an AJAX request instead a full page reload. To force a full reload, we also need to set refreshOnHistoryMiss to true:

<meta name="htmx-config" content='{"refreshOnHistoryMiss":"true"}' />

回复收藏 0 原文

芸娘子的小脾气 2025-02-10 16:49:38

查看以下内容：

<body hx-history="false" hx-boost="true" hx-push-url="true">

将HX历史属性设置为false在当前文档中的任何元素上，或HTMX加载到当前文档中的任何HTML片段，以防止将敏感数据保存到localstorage Cache时，当HTMX获取页面状态的快照时。
历史记录导航将按预期工作，但是在恢复时，将从服务器而不是历史记录缓存请求URL。

来源： docs

Check out this:

<body hx-history="false" hx-boost="true" hx-push-url="true">

Set the hx-history attribute to false on any element in the current document, or any html fragment loaded into the current document by htmx, to prevent sensitive data being saved to the localStorage cache when htmx takes a snapshot of the page state.
History navigation will work as expected, but on restoration the URL will be requested from the server instead of the history cache.

Source: docs

回复收藏 0 原文

~没有更多了~