如何使用 jQuery 获取目标 URL?

发布于 2024-08-31 03:35:23 字数 404 浏览 0 评论 0原文

我的网页有一个倒计时片段,它从隐藏字段读取剩余时间。它以 1 秒的步长从 300 倒数到 0,并相应地更新隐藏字段。当我重新加载页面时,浏览器提供隐藏字段的旧值,而不是从服务器获取它。

片段是:

  <输入类型=“隐藏”id=“剩余” 值=“300”/>

我需要在事件侦听器块中获取页面的目标 URL,例如:

$(窗口).unload(function() {
警报(窗口.位置.目的地); });

当然,“目的地”部分是我编造的。我真正需要的是检测重新加载,并将哈希参数附加到 URL 以防止缓存。

My web page has a countdown snippet which reads its remaining time from a hidden field. It count downs from 300 to 0 with a step of 1 second, and updates the hidden field consequently. When I reload the page, browser serves the old value of the hidden field rather that fetching it from the server.

The snippet is:

<span id="counter"> </span>
<input type="hidden" id="remaining"
value="300" />

I need to get the target URL of the page within an event listener block, such as:

$(window).unload(function() {
alert(window.location.destination);
});

Of course, I made up the "destination" part. What I really need is to detect the reload, and attach a hash parameter to the URL to prevent caching.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

软的没边 2024-09-07 03:35:23

您无法在 unload 函数中获取用户将要访问的页面的 URL,或者根本无法获取(在某些情况下,这会带来隐私风险)。 URL 上的片段标识符(哈希)不会阻止缓存;更改它甚至不会重新加载页面。对于缓存消除器,您必须写入 URL 的 ?query 部分,您可以通过例如执行此操作。 location.search= '?'+Math.random();

但这都不是一个好主意。浏览器在重新加载或后退/前进到页面时“记住”表单的先前值的行为是不受欢迎的,因此最好的选择就是根本不使用表单字段。让脚本在 DOM 的另一部分写出数据:

<span id="counter" class="remaining-300"></span>

并从脚本中的 span 元素的 .className 中读取数据,或者直接将变量写入 JS:

<span id="counter"></span>
<script type="text/javascript">
    var remaining= 300;
</script>

这会将倒计时重置为每次 300 秒页面加载的时间。

您可能还需要考虑“bfcache”,它在许多现代浏览器上保留您的原始页面(包括其中的所有内容和脚本状态),当用户导航离开时,然后在您按“后退”时将其带回而不重新加载。

目前,倒计时将继续进行,但在隐藏页面时不会进行倒计时,因此您剩下的时间将与离开时一样多。如果这不是您想要的,您可以尝试设置独立于代码间隔的截止时间超时,以始终在预期的重新加载时间触发。或者,作为最后的手段并且通常要避免,您可以通过将 onunload 设置为任何内容(甚至是不执行任何操作的函数)来故意破坏 bfcache。

You can't get the URL of the page the user is going to in an unload function, or at all (in some cases it would be a privacy risk). And a fragment identifier (hash) on the URL will not prevent caching; changing it will not even reload the page. For a cachebuster you would have to write to the ?query part of the URL, which you could do through eg. location.search= '?'+Math.random();.

But none of that is a good idea. The behaviour where browsers ‘remember’ the previous value of a form when reloading or going back/forwards onto a page is unwanted, so your best bet is simply not to use a form field at all. Have the script write out data in another part of the DOM:

<span id="counter" class="remaining-300"></span>

and read that from the span element's .className in script, or simply write the variable straight to JS:

<span id="counter"></span>
<script type="text/javascript">
    var remaining= 300;
</script>

This will reset the countdown to 300 seconds each time the page is loaded.

You might also need to think about the ‘bfcache’, which on many modern browsers retains your original page — including all the content and script state in it — when a user navigates away, then brings it back without reloading when you press ‘Back’.

Currently that will continue ticking the countdown, but it won't have ticked whilst the page was being hidden, so you'll have as much time left as you had when you left. If that's not what you want, you could try setting a deadline timeout independently of the ticker interval, to always fire at the expected reload time. Or, as a last resort and generally to be avoided, you can break the bfcache deliberately by setting onunload to anything, even a function that does nothing.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文