在不触发hashchange事件的情况下更改散列

我正在使用散列来动态加载内容。为了使后退按钮工作，我正在捕获哈希更改。但是有时我需要更改哈希而不触发哈希更改函数（例如，当页面被重定向到服务器端，并且一旦内容已返回，我需要更新哈希）。在不触发hashchange事件的情况下更改散列

我已经想出了最佳解决方案是解开hashchange事件，进行更改并重新绑定它。然而，由于这是异步发生的，我发现它重新绑定的速度太快，并且仍然捕获了哈希变化。

我现在的解决方案非常差：在setTimeout中重新绑定。有没有人有更好的主意？

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

编辑：
阿米尔Raminfar的建议促使我不需要超时的解决方案。我添加了一个类变量

_ignoreHashChange = false;

当我想改变的哈希默默我这样做：

_ignoreHashChange = true; 
window.location.hash = "!" + url;

和哈希改变事件做到这一点：

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

来源

2010-11-05 SystemicPlural

一个不错的，简单的解决方案，你应该让一个答案 – Peter 2012-09-19 09:19:47

的唯一剩下的就是在设置_ignoreHashChange = true之前检查新散列是否与旧散列相同; – Kasheftin 2013-03-23 13:32:59

你可能想看看牛仔的烧烤图书馆，它可以很好地控制Back和Hashchange：http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js。 html – hybernaut 2010-11-05 14:26:25

你可以有像这样的功能：

function updateHash(newHash){ 
    ... 
    oldHash = newHash 
}

然后在您的setTimeout你需要做

function(){ 
    if(oldHash != currenHash){ 
    updateHash(currenHash); 
    } 
}

所以现在你可以手动调用更新哈希，它不会由事件触发。你也可以在updateHash中有更多的参数来做其他事情。

顺便说一句，你看过jQuery历史插件吗？ http://tkyk.github.com/jquery-history-plugin/

来源

2010-11-05 14:24:32

这将需要一个设定的时间间隔，但是，原则上这是可行的。谢谢。 – SystemicPlural 2010-11-05 14:38:01

是的，我看了几个插件。他们都太臃肿或我的需求越野车。 – SystemicPlural 2010-11-05 14:38:51

您提示我提供了一个不需要超时的更好的解决方案。有关详细信息，请参阅我的主文章中的编辑。感谢您的帮助 – SystemicPlural 2010-11-05 14:58:26

你可以使用history.replaceState和追加的散列，以取代目前的URI而不触发hashchange事件：

var newHash = 'test'; 

history.replaceState(null, null, document.location.pathname + '#' + newHash);

JSFiddle example

来源

2017-07-06 13:55:11 Tim

'history.replaceState'也不会将hashchange推入历史记录中，但如果您需要，可以使用'history。pushState';） – qdev 2017-12-20 22:23:57

@qdev是的，但这不是QA的要求... – Tim 2017-12-22 15:31:38

在不触发hashchange事件的情况下更改散列

回答

相关问题