在不触发hashchange事件的情况下更改哈希

Sys*_*ral 49 javascript jquery

我正在使用哈希来动态加载内容.为了使后退按钮工作,我正在捕获哈希变化.但是有时我需要更改散列而不触发散列更改功能(例如,当页面被重定向到服务器端时,我需要在内容返回后更新散列.)

我提出的最佳解决方案是取消绑定hashchange事件,进行更改然后重新绑定它.但是,由于这是异步发生的,我发现它重新绑定太快并仍然捕获哈希更改.

我目前的解决方案非常糟糕:在setTimeout中重新绑定.有没有人有更好的主意?

    $(window).unbind( 'hashchange', hashChanged);
    window.location.hash  = "!" + url;
    setTimeout(function(){
        $(window).bind( 'hashchange', hashChanged);
    }, 100);
Run Code Online (Sandbox Code Playgroud)


编辑:
Amir Raminfar的建议促使我找到一个不需要超时的解决方案.我添加了一个类变量

_ignoreHashChange = false;
Run Code Online (Sandbox Code Playgroud)

当我想静默更改哈希时,我这样做:

_ignoreHashChange = true;
window.location.hash  = "!" + url;
Run Code Online (Sandbox Code Playgroud)

并且散列更改事件执行此操作:

function hashChanged(event){
    if(_ignoreHashChange === false){
        url = window.location.hash.slice(2);
        fetchContent(url);
    }
    _ignoreHashChange = false;
}
Run Code Online (Sandbox Code Playgroud)

Tim*_*Tim 13

您可以使用history.replaceState并附加哈希值,以替换当前URI而不触发hashchange事件:

var newHash = 'test';

history.replaceState(null, null, document.location.pathname + '#' + newHash);
Run Code Online (Sandbox Code Playgroud)

JSFiddle示例

  • `history.replaceState` 也不会将 hashchange 推送到历史记录中,但如果你愿意,你可以使用 `history.pushState` ;) (2认同)

Ami*_*far 6

你可以有这样的功能:

function updateHash(newHash){
  ...
  oldHash = newHash
}
Run Code Online (Sandbox Code Playgroud)

然后在你的setTimeOut中你需要做

function(){
  if(oldHash != currenHash){
    updateHash(currenHash);
  }
}
Run Code Online (Sandbox Code Playgroud)

所以现在你可以手动调用update hash,它不会被事件触发.您还可以在updateHash中使用更多参数来执行其他操作.

顺便问一下,你看过jquery历史插件了吗?http://tkyk.github.com/jquery-history-plugin/