2011-11-10 13 views
5

ブラウザ履歴の変更(つまり、戻るまたは進むボタン)でのみハッシュ変更を検出できますか?Javascript/jQueryは、ブラウザの戻る/進むボタンでのみハッシュ変更を検出します。

私はonBeforeUnloadイベントを見たことがありますが、ウィンドウがアンロードされていないため、このイベントはハッシュ変更で発生しません。

hashchangeイベントは、明らかにハッシュが変更されたときに発生します。すべての修正?好ましくはプラグインなし。私はjQueryの履歴プラグインを見てきましたが、最も簡単な解決策を探しています。

ありがとうございました。

答えて

4

window.onhashchangeイベントをご覧ください。

ただし、現在のところ、すべてのブラウザでサポートされていません。 BA jQueryハッシュ変更プラグインhereを見てください。あなたが最後にプラグインを使用することを選択するとうまくいくかもしれません。

こちらがお役に立てば幸いです。

0

ハッシュで、またはHTML5履歴APIを使用することはできません。ユーザーが戻るボタンまたは進むボタンをクリックするだけのイベントはありません。何らかの種類の拡張機能をインストールしたり、クライアントマシンにインストールすることが可能でない限り、オリジナルの問題とは別のアプローチが必要になるでしょう。

1

私は別のアプローチをお勧めします。いくつかのページにリンクするリンクがあるとします(ただし、AJAXを使用しないでください)。そのリンクがクリックされると、あなたは好きなものにハッシュを変更します。今、ユーザーが戻るボタンをクリックすると、ハッシュは元のリンクをクリックする前の状態に戻りますが、リンクやボタンでクリックイベントが発生したかどうかを確認することができますあなたがチェックしたいセレクター/イベント)。それが解雇された場合、リクエストはページ自体のクリックから発生したことがわかります。確認しているイベントが発生していない場合は、クリックが戻るボタンまたは進むボタンから来たことがわかります。

もう1つのことは、変更時にハッシュに接尾辞を追加することです(発砲したイベントの確認に基づいて、戻るボタンまたは進むボタンから)。したがって、ハッシュ値が#pageTitleの場合は、#pageTitle_chromeに戻して、ハッシュが戻るボタンまたは進むボタンから変更されたことを示します。

次に、ハッシュをチェックしているときに、そのハッシュがどのような種類のハッシュ変更であったかを検出するために、_chromeが含まれているかどうかを確認できます。

2

Chrisが質問したと思うのは、ブラウザの履歴(戻る/進む)ボタンを操作しているときにのみ、window.onhashchangeイベントが機能する方法です。

答え=いいえ...しかし、if文を関数に入れることができます。
私はこれを行うだろう:

$('.nav').click(function() { //on the onclick event for your nav add a class 
    $(this).addClass('navClick'); // before you change the hash. 
    window.location.hash = 'state' + $(this).html(); 
}); 
function getLocationHash() { 
    return window.location.hash.substring(1); 
} 
window.onhashchange = function(e) { // if element does not exist with your 
    if ($('.navClick').length == 0) { // 'navClick' class then check hash 
    switch(getLocationHash()) { 
     case 'state1': 
     execute code block 1; 
     break; 
     case 'state2': 
     execute code block 2; 
     break; 
     default: 
     code to be executed if different from case 1 and 2; 
    } 
    } else {       // removes the class if it does 
    $('.navClick').removeClass('navClick'); 
    } 
}; 

が、私はそれはすべてのコンテンツを動的に変更しているmy site

に似た何かをしました。私はまだwindow.location.hashを使ってサイトの状態を把握しています。サイト内をナビゲートし、サイトが履歴内にある場合に戻るフォワードボタンを使用してナビゲートすると、後でページをリロードするのではなく、実際にナビをクリックした場合のように状態が動的に変更されます。ヒストリを使用してナビゲートしている場合のみ、ハッシュをチェックします。

6

ナビゲーションが起動されるたびにフラグをマークし、フラグがマークされていると、hashChangeイベントはそれを無視します。それ以外の場合は、バック/フォワードイベントのように処理します。

関連する問題