573

ナビゲーションにAjaxとハッシュを使用しています。

window.location.hashこのように変更されたかどうかを確認する方法はありますか？

http://example.com/blah＃123からhttp://example.com/blah＃456 _ _

ドキュメントの読み込み時に確認すれば動作します。

しかし、＃hashベースのナビゲーションがある場合、ブラウザの戻るボタンを押しても機能しません（したがって、blah＃456からblah＃123にジャンプします）。

アドレスボックス内に表示されますが、JavaScriptではわかりません。

4

13 に答える 13

626

これを実際に行う唯一の方法（そして「reallysimplehistory」がこれを行う方法）は、現在のハッシュをチェックし続ける間隔を設定し、それを以前のものと比較することによって、これを行い、サブスクライバーに変更をサブスクライブさせることですハッシュが変更された場合に発生するイベント..完全ではありませんが、ブラウザは実際にはこのイベントをネイティブでサポートしていません。

この回答を最新の状態に保つために更新します。

jQueryを使用している場合（今日はほとんどの場合、ある程度基礎となるはずです）、jQueryが提供する抽象化を使用して、イベントシステムを使用してウィンドウオブジェクトのハッシュ変更イベントをリッスンすることをお勧めします。

$(window).on('hashchange', function() {
  //.. work ..
});

ここでの良い点は、ハッシュ変更のサポートについても心配する必要のないコードを記述できることです。ただし、あまり知られていないjQuery機能jQueryの特別なイベントの形で魔法をかける必要があります。

この機能を使用すると、基本的に、誰かが何らかの方法（イベントへのバインドなど）でイベントを初めて使用しようとしたときに、任意のイベントに対してセットアップコードを実行できます。

このセットアップコードでは、ネイティブブラウザーのサポートを確認できます。ブラウザーがこれをネイティブに実装していない場合は、変更をポーリングしてjQueryイベントをトリガーする単一のタイマーをセットアップできます。

This completely unbinds your code from needing to understand this support problem, the implementation of a special event of this kind is trivial (to get a simple 98% working version), but why do that when somebody else has already.

于 2009-03-25T09:38:14.070 に答える
300

HTML5はイベントを指定しhashchangeます。このイベントは現在、すべての最新のブラウザでサポートされています。次のブラウザバージョンでサポートが追加されました。

  • Internet Explorer 8
  • Firefox 3.6
  • Chrome 5
  • Safari 5
  • Opera 10.6
于 2009-03-25T10:33:46.043 に答える
52

Internet Explorer 7 および Internet Explorer 9 の場合、ifステートメントは true (Windows の「onhashchange」の場合) を返しますが、window.onhashchange決して起動しないので、ハッシュを保存し、変更されたかどうかを 100 ミリ秒ごとに確認することをお勧めします。 Internet Explorer のすべてのバージョン。

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

編集 - jQuery 1.9以降、$.browser.msieサポートされていません。ソース: http://api.jquery.com/jquery.browser/

于 2011-06-28T15:42:41.777 に答える
14

IE ブラウザーで History と window.location.hash を処理するには、多くのトリックがあります。

  • 元の質問が言ったように、ページ a.html#b から a.html#c に移動してから戻るボタンを押すと、ブラウザはページが変更されたことを認識しません。例を挙げて説明しましょう: window.location.href は、a.html#b または a.html#c に関係なく、'a.html#c' になります。

  • 実際には、要素 '<a name="#b">' および '<a name="#c">' がページに以前に存在する場合にのみ、a.html#b および a.html#c が履歴に保存されます。

  • ただし、ページ内に iframe を配置し、その iframe で a.html#b から a.html#c に移動してから戻るボタンを押すと、iframe.contentWindow.document.location.href が期待どおりに変更されます。

  • コードで'document.domain= something ' を使用すると、iframe.contentWindow.document.open()' にアクセスできません (多くの History Manager がそうしています)。

これが本当の反応ではないことはわかっていますが、おそらく IE 履歴のメモが誰かの役に立ちます。

于 2009-10-30T00:19:09.817 に答える
12

Firefox には 3.6 から onhashchange イベントがありました。window.onhashchangeを参照してください。

于 2010-06-24T17:29:30.410 に答える
11

Ben Alman には、これに対処するための優れた jQuery プラグインがあります: http://benalman.com/projects/jquery-hashchange-plugin/

jQuery を使用していない場合は、分析するための興味深いリファレンスになる可能性があります。

于 2010-10-19T17:46:29.727 に答える
9

「window.location」オブジェクトの「hash」プロパティにオブザーバー (「watch」メソッド) を簡単に実装できます。

Firefox にはobject の変更を監視するための独自の実装がありますが、他の実装 ( JavaScript でオブジェクト プロパティの変更を監視するなど) を使用すると、他のブラウザーでうまくいきます。

コードは次のようになります。

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

次に、それをテストできます。

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

そしてもちろん、それはあなたのオブザーバー機能をトリガーします。

于 2010-10-29T09:04:18.900 に答える
6

適切な実装はhttp://code.google.com/p/reallysimplehistory/で見つけることができます。唯一の（しかし）問題とバグは次のとおりです。InternetExplorerでロケーションハッシュを手動で変更すると、履歴スタック全体がリセットされます（これはブラウザの問題であり、解決できません）。

Internet Explorer 8は「hashchange」イベントをサポートしていることに注意してください。これはHTML5の一部になりつつあるため、他のブラウザーが追いつくと予想される場合があります。

于 2009-03-25T09:31:58.407 に答える
1

もう 1 つの優れた実装はjQuery Historyです。これは、ブラウザーでサポートされている場合はネイティブの onhashchange イベントを使用します。サポートされていない場合は、ブラウザーが iframe または interval を適切に使用して、期待されるすべての機能が正常にエミュレートされるようにします。また、特定の状態にバインドするための優れたインターフェイスも提供します。

注目に値するもう 1 つのプロジェクトは、jQuery Ajaxy です。これは、jQuery History を ajax に追加するためのほぼ拡張機能です。ハッシュを使用して ajax を使い始めると、非常に複雑になります。

于 2010-08-28T17:00:33.050 に答える
0

私はjQueryプラグインHUtilを使用し、その上にYUI履歴のようなインターフェイスを記述しました。

一度チェックしてください。あなたが助けを必要とするならば、私は助けることができます。

于 2009-12-28T17:25:55.300 に答える