检测 URL 更改（不卸载窗口）答案

【问题标题】：Detect URL changes (without window unload)检测 URL 更改（不卸载窗口）
【发布时间】：2013-08-27 18:42:15
【问题描述】：

我想在“URL 更改之前”事件中添加一个侦听器，以访问旧 URL。如果页面没有重新加载（AJAX 驱动的页面），window.onbeforeunload 不会触发。

这发生在 YouTube 视频页面上，例如，当您点击右侧导航栏中的另一个视频时。

我读过this post，它轮询window.location。但这不会捕获旧 URL。

这是一个 Chrome 扩展程序。我正在寻找一种在 javascript 中的 URL 更改之前进行检测的方法。

【问题讨论】：

试一试History API。
尝试搜索本地存储
您可能正在寻找与 History API 相结合的 beforeunload 事件
您想在弹出窗口中使用它吗？还是使用 greesemonkey 脚本？您在帖子中遗漏了一些关键信息。
您明确表示要检测 YouTube 上的导航。在这种情况下，请参阅 this answer 至 this question。

标签： javascript ajax url google-chrome-extension

【解决方案1】：

对于使用history API 的 AJAX 驱动页面（大部分，包括 YouTube），您可以拼接到history.pushState。

对于 Chrome，旧网址将位于 spf-referer 属性中。（此外，在 pushState 触发时，location.href 仍将设置为旧 URL。）

所以这样的代码可以工作：

var H               = window.history;
var oldPushState    = H.pushState;
H.pushState         = function (state) {
    if (typeof H.onpushstate == "function") {
        H.onpushstate ({state: state} );
    }
    return oldPushState.apply (H, arguments);
}
window.onpopstate = history.onpushstate = function (evt) {
    console.log ("Old URL: ", evt.state["spf-referer"]);
}

请注意，由于您需要覆盖目标页面的 pushState 函数，因此您必须在内容脚本中 inject 此代码。

【讨论】：

【解决方案2】：

如果您正在编写 Chrome 扩展程序，您可以监听在标签 URL 更改时触发的 onUpdated 事件。更多信息在这里https://developer.chrome.com/extensions/tabs.html#event-onUpdated。

【讨论】：

我知道更新选项卡。但是，您只能在更新 url 时使用后台脚本进行检测。我正在寻找一种方法来检测内容脚本，同时仍然可以访问旧网址。
那么你可以使用你的问题中提到的轮询window.location的方法。要访问旧 url，只需将其保存为全局变量，或将其保存到 localStorage。 Youtube 使用 History API，因此在导航到另一个视频时它不会重新加载您的内容脚本。