javascript - 获取 hashchange 之前的哈希值

Question

假设我的 html 是

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

和 Js 是

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

我想获取哈希更改之前的哈希值。这可能吗？如果是，如何？

Answer 1

用那个

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

演示：http: //jsbin.com/ulumil/

Answer 2

您必须跟踪最后一个哈希，例如：

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

Answer 3

实际上，Amit 提供的解决方案适用于 jquery 库和跨平台。

这是一个使用核心 javascript 和跨浏览器的更简化的解决方案。（检查最新版本的 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);
};

Answer 4

不要使用

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

它不适用于 IE，也可能不适用于其他地方。

而是使用这个。

(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
});

这应该适用于所有现代浏览器。

演示：https ://output.jsbin.com/qafupu#one