javascript - 检测 URL 更改(无窗口卸载)

Question

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

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

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

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

Answer 1

对于使用history API的AJAX驱动的页面(大部分，包括YouTube)，可以拼接成history.pushState。

对于 Chrome，旧 url 将位于 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此代码来自您的内容脚本。