jquery - 如何使用 jQuery 获取目标 URL？

Question

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

代码片段是:

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

我需要在事件监听器 block 中获取页面的目标 URL，例如:

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

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

Answer 1

您无法在 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。