10

Suppose my html is

<a href="#one">One</a>
<a href="#two">Two</a>

and Js is

$(window).on("hashchange"){
alert(document.location.hash);
}

I want to get the hash value which was before hash change .Is it Possible?If yes ,How?

  • possible duplicate: http://stackoverflow.com/questions/680785/on-window-location-hash-change – Ram Jul 09 '12 at 09:10

4 Answers4

14

use that

$(window).on("hashchange", function(e){
    console.log(e.originalEvent.oldURL)
    console.log(e.originalEvent.newURL)
})​;

Demo: http://jsbin.com/ulumil/

Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
Amit
  • 3,952
  • 7
  • 46
  • 80
9

You have to track the last hash, for example:

var currentHash = function() {
  return location.hash.replace(/^#/, '')
}

var last_hash
var hash = currentHash()

$(window).bind('hashchange', function(event){
  last_hash = hash
  hash = currentHash()
  console.log('hash changed from ' + last_hash + ' to ' + hash)
});
theunexpected1
  • 1,017
  • 11
  • 23
Patrick Oscity
  • 53,604
  • 17
  • 144
  • 168
  • 1
    This does not seem to work under IE9 `event.fragment` is also undefined. Had to replace it with `location.hash.replace( /^#/, '' )` – raphaëλ Aug 22 '14 at 17:07
3

Actually the solution provided by Amit works but with jquery library and crossplatform as well.

Here is a more simplified solution using core javascript and crossbrowser as well. (checked with latest version of IE/FF/Chrome/Safari)

window.onhashchange = function(e){
  console.log(e);
  var oldURL = e.oldURL; 
  var newURL = e.newURL; 
  console.log("old url = " + oldURL);
  console.log("new url = " + newURL);
  var oldHash = oldURL.split("#")[1];
  var newHash = newURL.split("#")[1];
  console.log(oldHash);
  console.log(newHash);
};
Sanjay
  • 1,595
  • 1
  • 17
  • 29
  • As indicated above, this works on latest version of (IE/FF/Chrome/Safari). The codes are tested well, and working for me on all the four browsers indicated. I don't know if FF12 is the latest version of browser. When I tested, my FF version was FF20.0.

    You can check the value of e (done in second line) and find out the variables oldURL and newURL (e.oldURL and e.newURL) if they exists or not. Good Luck.     – Sanjay Apr 06 '13 at 06:13
  • I meant FF19 on Linux. Anyways, I am using `window.location.hash` which seems to be much more reliable. – jldupont Apr 06 '13 at 11:12
  • 1
    Complete unrelated points you have made. `window.location.hash` and `window.onhashchange` are for two complete different purpose. `window.location.hash` just gives you hash index but `window.onhashchange` triggers if the hash index is changed. And the above solution helps you find out what current index is and what the past index was before your hash is changed. Try to understand the scenerio first my boy. Any way glad to know that your problem is solved. – Sanjay Apr 07 '13 at 05:14
  • 2
    This solution doesn't seem to work in IE10. Output is [object Object] old url = undefined new url = undefined SCRIPT5007: Unable to get property 'split' of undefined or null reference – Bil1 Jun 15 '13 at 21:41
  • Yea may be you got it right. The solution was working at the time I wrote and tested it on the lastest version at the time of writing. – Sanjay Jun 19 '13 at 00:06
1

Don't use 

$(window).on("hashchange", function(e){
    console.log(e.originalEvent.oldURL)
    console.log(e.originalEvent.newURL)
})​;

It won't work on IE and probably elsewhere too.

Use this rather.

(function(w, $){
  var UrlHashMonitor = {};
  UrlHashMonitor.oldHash = '';
  UrlHashMonitor.newHash = '';
  UrlHashMonitor.oldHref = '';
  UrlHashMonitor.newHref = '';
  UrlHashMonitor.onHashChange = function(f){
    $(window).on('hashchange', function(e){
      UrlHashMonitor.oldHash = UrlHashMonitor.newHash;
      UrlHashMonitor.newHash = w.location.hash;
      UrlHashMonitor.oldHref = UrlHashMonitor.newHref;
      UrlHashMonitor.newHref = w.location.href;
      f(e);
    });
  };
  UrlHashMonitor.init = function(){
    UrlHashMonitor.oldHash = UrlHashMonitor.newHash =   w.location.hash;
    UrlHashMonitor.oldHref = UrlHashMonitor.newHref = w.location.href;
  };
  w.UrlHashMonitor = UrlHashMonitor;
  return UrlHashMonitor;

})(window, window.jQuery);

/*
 * USAGE EXAMPLE
 */
UrlHashMonitor.init();
UrlHashMonitor.onHashChange(function(){
  console.log('oldHash: ' + UrlHashMonitor.oldHash);
  console.log('newHash: ' + UrlHashMonitor.newHash);
  console.log('oldHref: ' + UrlHashMonitor.oldHref);
  console.log('newHref: ' + UrlHashMonitor.newHref);
  //do other stuff
});

This should work in all modern browsers.

DEMO: https://output.jsbin.com/qafupu#one

AlFra
  • 379
  • 1
  • 6
  • 17