Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I detect an address bar change with JavaScript?

I have a Ajax heavy application that may have a URL such as

http://example.com/myApp/#page=1 

When a user manipulates the site, the address bar can change to something like

http://example.com/myApp/#page=5 

without reloading the page.

My problem is the following sequence:

  1. A user bookmarks the first URL.
  2. The user manipulates the application such that the second URL is the current state.
  3. The user clicks on the bookmark created in step 1.
  4. The URL in the address bar changes from http://example.com/myApp/#page=5 to http://example.com/myApp/#page=1, but I don't know of a way to detect the change happened.

If I detect a change some JavaScript would act on it.

like image 269
JoshNaro Avatar asked Dec 18 '09 22:12

JoshNaro


People also ask

Which method is used to change the address in address bar of the browser?

HTML5 History API allows browsers to change the URL in browser address bar without reloading or refreshing the page using pushState function. The pushState method works similar to window.


2 Answers

HTML5 introduces a hashchange event which allows you to register for notifications of url hash changes without polling for them with a timer.

It it supported by all major browsers (Firefox 3.6, IE8, Chrome, other Webkit-based browsers), but I'd still highly suggest to use a library which handles the event for you - i.e. by using a timer in browsers not supporting the HTML5 event and using the event otherwise.

window.onhashchange = function() {     alert("hashtag changed"); }; 

For further information on the event, see https://developer.mozilla.org/en/dom/window.onhashchange and http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.

like image 89
ThiefMaster Avatar answered Sep 21 '22 13:09

ThiefMaster


check the current address periodically using setTimeout/interval:

 var oldLocation = location.href;  setInterval(function() {       if(location.href != oldLocation) {            // do your action            oldLocation = location.href       }   }, 1000); // check every second 
like image 20
user187291 Avatar answered Sep 19 '22 13:09

user187291