5

I want to add a listener to "before URL change" event, with access to the old URL. window.onbeforeunload does not fire if the page does not reload (AJAX driven pages).

This happens on YouTube video pages, when you click on another video in the right navigation column, for example.

I have read this post, which polls window.location. But this does not capture the old URL.

This is for a Chrome extension. I'm looking for a way to detect before URL change in javascript.

7
  • 1
    Give the History API a shot.
    – Joseph
    Aug 25, 2013 at 0:13
  • try searching for local storage
    – Charaf JRA
    Aug 25, 2013 at 0:15
  • You might be looking for the beforeunload event coupled with the History API Aug 25, 2013 at 0:38
  • You want to use this in a popup window? Or using a greesemonkey script? Your missing some key information in your post.
    – Menelaos
    Aug 25, 2013 at 0:46
  • 1
    You've specifically said that you want to detect navigation on YouTube. In that case, see this answer to this question.
    – Rob W
    Sep 23, 2013 at 13:44

2 Answers 2

4

For AJAX-driven pages that use the history API (most of them, including YouTube), you can splice into history.pushState.

For Chrome, the old url will be in the spf-referer property. (Also, the location.href will still be set to the old URL while pushState is firing, too.)

So code like this will work:

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"]);
}

Note that, because you need to override the target page's pushState function, you must inject this code from your content script.

2

If you're writing a Chrome extension, you can listen to the onUpdated event which is fired when a tab url is changed. More information here https://developer.chrome.com/extensions/tabs.html#event-onUpdated.

2
  • I am aware of the tab onUpdate. However, you can only detect with background script, when the url is updated. I'm looking for a way to detect in content script, while still having access to the old url.
    – Keven Wang
    Aug 25, 2013 at 3:48
  • 2
    Then you can use the method of polling window.location as mentioned in your question. For having access to the old url, just save it as a global variable, or save it to localStorage. Youtube uses History API, so it'll not reload your content script when navigating to another video.
    – Ryan Dao
    Aug 25, 2013 at 4:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.