检测URL更改(不卸载窗口)

Question

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

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

我读过这篇文章，它对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函数，所以必须从内容脚本中注入此代码。

Answer 2

如果您正在编写Chrome扩展，则可以侦听在更改选项卡url时触发的onUpdated事件。点击此处了解更多信息https://developer.chrome.com/extensions/tabs.html#event-on已更新。