javascript - 检测 URL 更改（不卸载窗口）

Question

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

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

我读过这篇民意调查的帖子window.location。但这不会捕获旧 URL。

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

Answer 1

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

对于 Chrome，旧 url 将在spf-referer属性中。（此外，location.href在 pushState 触发时，仍将设置为旧 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功能，因此您必须从内容脚本中注入此代码。

Answer 2

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