获取 hashchange 之前的 hash 值答案

【问题标题】：Get the hash value which was before hashchange获取 hashchange 之前的 hash 值
【发布时间】：2012-07-08 16:10:42
【问题描述】：

假设我的 html 是

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

而Js是

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

我想得到散列改变之前的散列值。这可能吗？如果是，如何？

【问题讨论】：

可能重复：stackoverflow.com/questions/680785/…

标签： javascript jquery html hash

【解决方案1】：

使用它

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

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

【讨论】：

你用的是什么浏览器和操作系统
Mozilla Firefox 和 os Windows 7，你不应该问这个，因为我想要一个跨浏览器兼容的答案
这在 IE 11 上未定义。

【解决方案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)
});

【讨论】：

这似乎在 IE9 下不起作用 event.fragment 也未定义。不得不用location.hash.replace( /^#/, '' )替换它

【解决方案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);
};

【讨论】：

如上所述，这适用于 (IE/FF/Chrome/Safari) 的最新版本。这些代码经过了很好的测试，并且可以在所有四种浏览器上为我工作。不知道FF12是不是最新版的浏览器。我测试的时候，我的FF版本是FF20.0。

您可以检查 e 的值（在第二行完成）并找出变量 oldURL 和 newURL（e.oldURL 和 e.newURL）是否存在。祝你好运。
我指的是 Linux 上的 FF19。无论如何，我使用的是window.location.hash，这似乎更可靠。
完成您提出的无关要点。 window.location.hash 和 window.onhashchange 用于两个完全不同的目的。 window.location.hash 只是为您提供哈希索引，但window.onhashchange 会在哈希索引更改时触发。上面的解决方案可以帮助您找出当前索引是什么以及在您的哈希更改之前过去的索引是什么。试着先了解一下场景，我的孩子。很高兴知道您的问题已解决。
这个解决方案似乎在 IE10 中不起作用。输出为 [object Object] old url = undefined new url = undefined SCRIPT5007: Unable to get property 'split' of undefined or null reference
是的，也许你做对了。该解决方案在我撰写本文时正在运行，并在撰写本文时的最新版本上对其进行了测试。

【解决方案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

【讨论】：