Event when window location href changes

Question

I m writing a Greasemonkey script for a site which at some point modifies location href   How can I get an event  via window addEventListener or something similar  when window location href changes on a page  I also need access to the DOM of the document pointing to the new modified url   I ve seen other solutions which involve timeouts and polling  but I d like to avoid that if possible

User · Accepted Answer

popstate event       The popstate event is fired when the active history entry changes         The popstate event is only triggered by doing a browser action such as a click on the back button  or calling history back   in JavaScript    So  listening to popstate event and sending a popstate event when using history pushState   should be enough to take action on href change   window addEventListener  popstate   listener    const pushUrl    href    gt      history pushState         href     window dispatchEvent new Event  popstate

User · Answer

Well there is 2 ways to change the location href  Either you can write location href    y html   which reloads the page or can use the history API which does not reload the page  I experimented with the first a lot recently   If you open a child window and capture the load of the child page from the parent window  then different browsers behave very differently  The only thing that is common  that they remove the old document and add a new one  so for example adding readystatechange or load event handlers to the old document does not have any effect  Most of the browsers remove the event handlers from the window object too  the only exception is Firefox  In Chrome with Karma runner and in Firefox you can capture the new document in the loading readyState if you use unload   next tick  So you can add for example a load event handler or a readystatechange event handler or just log that the browser is loading a page with a new URI  In Chrome with manual testing  probably GreaseMonkey too  and in Opera  PhantomJS  IE10  IE11 you cannot capture the new document in the loading state  In those browsers the unload   next tick calls the callback a few hundred msecs later than the load event of the page fires  The delay is typically 100 to 300 msecs  but opera simetime makes a 750 msec delay for next tick  which is scary  So if you want a consistent result in all browsers  then you do what you want to after the load event  but there is no guarantee the location won t be overridden before that    var uuid    win     Math random    var timeOrigin   new Date    var win   window open  about blank   uuid   menubar yes location yes resizable yes scrollbars yes status yes      var callBacks       var uglyHax   function         var done   function             uglyHax            callBacks forEach function  cb               cb                           win addEventListener  unload   function unloadListener            win removeEventListener  unload   unloadListener      Firefox remembers  other browsers don t         setTimeout function                    IE10  IE11  Opera  PhantomJS  Chrome has a complete new document at this point                Chrome on Karma  Firefox has a loading new document at this point             win document readyState     IE10 and IE11 sometimes fails if I don t access it twice  idk  how or why             if  win document readyState      complete                   done                else                 win addEventListener  load   function                         setTimeout done  0                                  0              uglyHax      callBacks push function         console log  cb   win location href  win document readyState       if  win location href      http   localhost 4444 y html           win location href    http   localhost 4444 y html       else         console log  done        win location href    http   localhost 4444 x html     If you run your script only in Firefox  then you can use a simplified version and capture the document in a loading state  so for example a script on the loaded page cannot navigate away before you log the URI change   var uuid    win     Math random    var timeOrigin   new Date    var win   window open  about blank   uuid   menubar yes location yes resizable yes scrollbars yes status yes      var callBacks       win addEventListener  unload   function unloadListener        setTimeout function             callBacks forEach function  cb               cb                       0         callBacks push function         console log  cb   win location href  win document readyState          be aware that the page is in loading readyState          so if you rewrite the location here  the actual page will be never loaded  just the new one     if  win location href      http   localhost 4444 y html           win location href    http   localhost 4444 y html       else         console log  done        win location href    http   localhost 4444 x html     If we are talking about single page applications which change the hash part of the URI  or use the history API  then you can use the hashchange and the popstate events of the window respectively  Those can capture even if you move in history back and forward until you stay on the same page  The document does not changes by those and the page is not really reloaded

User · Answer

I use this script in my extension  Grab Any Media  and work fine   like youtube case    var oldHref   document location href   window onload   function          var          bodyList   document querySelector  body             observer   new MutationObserver function mutations                 mutations forEach function mutation                     if  oldHref    document location href                         oldHref   document location href                          Changed   your code here                                                          var config             childList  true          subtree  true             observer observe bodyList  config

User · Answer

You can t avoid polling  there isn t any event for href change   Using intervals is quite light anyways if you don t go overboard  Checking the href every 50ms or so will not have any significant effect on performance if you re worried about that

User · Answer

There is a default onhashchange event that you can use   Documented HERE  And can be used like this   function locationHashChanged  e         console log  location hash        console log  e oldURL  e newURL        if   location hash       pageX              pageX             window onhashchange   locationHashChanged    If the browser doesn t support oldURL and newURL you can bind it like this     let this snippet run before your hashChange event binding code if   window HashChangeEvent    function         let lastURL   document URL      window addEventListener   hashchange   function  event             Object defineProperty  event   oldURL     enumerable  true  configurable  true  value  lastURL              Object defineProperty  event   newURL     enumerable  true  configurable  true  value  document URL              lastURL   document URL

User · Answer

Through Jquery  just try    window  on  beforeunload   function            your code goes here on location change        By using javascript   window addEventListener  beforeunload   function  event         your code goes here on location change        Refer Document   https   developer mozilla org en-US docs Web Events beforeunload

User · Answer

Have you tried beforeUnload  This event fires immediately before the page responds to a navigation request  and this should include the modification of the href        lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 3 2 Final  EN  gt       lt HTML gt       lt HEAD gt       lt TITLE gt  lt  TITLE gt       lt META NAME  Generator  CONTENT  TextPad 4 6  gt       lt META NAME  Author  CONTENT     gt       lt META NAME  Keywords  CONTENT     gt       lt META NAME  Description  CONTENT     gt       lt  HEAD gt             lt script src  http   ajax googleapis com ajax libs jquery 1 3 jquery min js  type  text javascript  gt  lt  script gt               lt script type  text javascript  gt                document  ready function                      window  unload                          function event                                alert  navigating                                                                     theButton   click                      function event                           alert  Starting navigation                            window location href    http   www bbc co uk                                                                          lt  script gt         lt BODY BGCOLOR   FFFFFF  TEXT   000000  LINK   FF0000  VLINK   800000  ALINK   FF00FF  BACKGROUND     gt            lt button id  theButton  gt Click to navigate lt  button gt            lt a href  http   www google co uk  gt  Google lt  a gt       lt  BODY gt       lt  HTML gt    Beware  however  that your event will fire whenever you navigate away from the page  whether this is because of the script  or somebody clicking on a link  Your real challenge  is detecting the different reasons for the event being fired   If this is important to your logic

[javascript] Event when window.location.href changes

Examples related to javascript

Examples related to dom

Examples related to greasemonkey

Examples related to dom-events