如何检查URL是否在JavaScript中发生了变化?例如,像GitHub这样使用AJAX的网站,会在#符号后附加页面信息,以创建唯一的URL,而无需重新加载页面。检测该URL是否发生变化的最佳方法是什么?

是否再次调用onload事件? 是否有URL的事件处理程序? 或者必须每秒钟检查URL以检测更改?


当前回答

window.addEventListener("beforeunload", function (e) {
    // do something
}, false);

其他回答

用jquery(和一个插件)就可以做到

$(window).bind('hashchange', function() {
 /* things */
});

http://benalman.com/projects/jquery-hashchange-plugin/

否则,你必须使用setInterval并检查哈希事件的变化(window.location.hash)

更新!一个简单的草稿

function hashHandler(){
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function(){
        if(that.oldHash!=window.location.hash){
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };
    this.Check = setInterval(function(){ detect() }, 100);
}

var hashDetection = new hashHandler();

在现代浏览器(IE8+, FF3.6+, Chrome)中,你可以只听窗口上的hashchange事件。

在一些旧的浏览器中,您需要一个计时器来持续检查location.hash。如果你正在使用jQuery,有一个插件可以做到这一点。

例子

下面我将撤销所有URL更改,以保持滚动:

<script type="text/javascript">
  if (window.history) {
    var myOldUrl = window.location.href;
    window.addEventListener('hashchange', function(){
      window.history.pushState({}, null, myOldUrl);
    });
  }
</script>

请注意,以上使用的历史api可用于Chrome, Safari, Firefox 4+和Internet Explorer 10pp4+

添加一个哈希更改事件侦听器!

window.addEventListener('hashchange', function(e){console.log('hash changed')});

或者,监听所有URL更改:

window.addEventListener('popstate', function(e){console.log('url changed')});

这比下面的代码要好,因为在window中只能存在一个东西。Onhashchange,你可能会覆盖其他人的代码。

// Bad code example

window.onhashchange = function() { 
     // Code that overwrites whatever was previously in window.onhashchange  
}

您在每次调用时都开始一个新的setInterval,而没有取消前一个——可能您只是想要一个setTimeout

window.onhashchange = function() { 
     //code  
}

window.onpopstate = function() { 
     //code  
}

or

window.addEventListener('hashchange', function() { 
  //code  
});

window.addEventListener('popstate', function() { 
  //code  
});

与jQuery

$(window).bind('hashchange', function() {
     //code
});

$(window).bind('popstate', function() {
     //code
});