在不觸發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事件的情況下更改散列

回答

相關問題