ハッシュを使用してコンテンツを動的にロードしています。戻るボタンを機能させるために、ハッシュの変更をキャプチャしています。ただし、ハッシュ変更関数をトリガーせずにハッシュを変更する必要がある場合があります (たとえば、ページがサーバー側でリダイレクトされ、コンテンツが戻ったらハッシュを更新する必要がある場合など)。
私が思いついた最善の解決策は、ハッシュ変更イベントをアンバインドし、変更を加えてから再バインドすることです。ただし、これは非同期で行われるため、再バインドが速すぎてハッシュの変更がキャッチされてしまうことがわかりました。
現時点での私の解決策は非常に貧弱です: setTimeout で再バインドします。もっと良いアイデアをお持ちの方はいませんか?
$(window).unbind( 'hashchange', hashChanged);
window.location.hash = "!" + url;
setTimeout(function(){
$(window).bind( 'hashchange', hashChanged);
}, 100);
編集:
Amir 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;
}
ベストアンサー1
history.replaceState
ハッシュを使用して追加すると、イベントをトリガーせずに現在の URI を置き換えることができますhashchange
。
var newHash = 'test';
history.replaceState(null, null, document.location.pathname + '#' + newHash);