web-dev-qa-db-ja.com

On window.location.hash - 変更しますか？

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

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

http://example.com/blah ＃123 to http://example.com/blah ＃456

ドキュメントがロードされたときに確認するとうまくいきます。

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

それはアドレスボックスの中に表示されますが、私はJavaScriptでそれをキャッチすることはできません。

javascriptajaxjavascript-eventsfragment-identifierhashchange
540
MilMike

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

この答えを新鮮に保つために更新します。

JQueryを使用している場合（今日では多少基礎的であるはずです）、Niceソリューションは、jQueryが提供する抽象化を使用して、そのイベントシステムを使用してウィンドウオブジェクトのハッシュ変更イベントを監視することです。

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

ここで素晴らしいことは、ハッシュ変更のサポートについてさらに心配する必要がないコードを書くことができるということですが、あまり知られていないjQuery機能 jQuery special events ）の形で魔法をかける必要があります。

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

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

これはあなたのコードがこのサポート問題を理解する必要性から完全に解放します、この種の特別なイベントの実装は（単純な98％作業バージョンを得るために）自明ですが、なぜ 他の誰かが既に を持っているとき）。

603
meandmycode

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

  • Internet Explorer 8
  • Firefox 3.6
  • Chrome 5
  • サファリ5
  • オペラ10.6
282
Miles

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/

50
Khan Salahuddin

IEブラウザでHistoryとwindow.location.hashを処理するための秘訣はたくさんあります。

  • 元の質問が言ったように、ページa.html＃bからa.html＃cに移動してから戻るボタンを押すと、ブラウザはそのページが変更されたことを知りません。例を挙げて説明します。window.location.hrefは、a.html＃bまたはa.html＃cのどちらであっても、 'a.html＃c'になります。

  • 実際には、a.html＃bとa.html＃cは履歴に保存されています only 要素 '<a name="#b">'と '<a name="#c">'が以前に存在した場合ページ。

  • ただし、ページ内にiframeを配置する場合は、そのiframe内でa.html＃bからa.html＃cに移動してから戻るボタンを押すと、iframe.contentWindow.document.location.hrefが正しく変更されます。

  • あなたのコードで 'document.domain = something 'を使うと、iframe.contentWindow.document.open（）にアクセスすることはできません（そして多くのHistory Managerがそれをしています）。

これは本当の反応ではないことを私は知っていますが、多分IE-Historyのメモが誰かに役立つでしょう。

14
Sergio Cinos

Firefoxは3.6以降onhashchangeイベントを開催しています。window.onhashchangeを参照してください。

12
edfuh

Ben Almanはこれに対処するための素晴らしいjQueryプラグインを持っています： http://benalman.com/projects/jquery-hashchange-plugin/

もしあなたがjQueryを使っていないのであれば、それを詳しく調べるのは興味深いかもしれません。

11
CJ.

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

Firefoxにはオブジェクトの変更を監視するための 独自の実装があります しかし、他の実装を使用する場合（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;

そしてもちろんそれはあなたのオブザーバー機能を引き起こすでしょう。

9
gion_13

私は反応アプリケーションでこれを使用して、ユーザーがどのビューにいたかによってURLに異なるパラメーターを表示させます。

私はを使用してハッシュパラメータを見ました

window.addEventListener('hashchange', doSomethingWithChangeFunction());

それから

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

御馳走を働かせ、進むと戻るのブラウザボタンと、またブラウザの履歴で動作します。

6
Sprose

まともな実装は http://code.google.com/p/reallysimplehistory/ にあります。唯一の（しかしそれも）問題とそれが持っているバグは：Internet Explorerで手動でロケーションハッシュを修正することは全体の履歴スタックをリセットするでしょう（これはブラウザの問題であり、それは解決できません）。

注意してください、Internet Explorer 8は "hashchange"イベントをサポートしています、そしてそれはHTML5の一部になっているのであなたは他のブラウザが追いつくことを期待するかもしれません。

6
Sergey Ilinsky
var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

それはそれです...今、あなたがあなたの戻るまたは進むボタンを押すといつでも、ページは新しいハッシュ値に従ってリロードされます。

1
batman

もう一つの素晴らしい実装は jQuery History です。ブラウザでサポートされている場合はネイティブのonhashchangeイベントを使用します。また、特定の状態にバインドするためのNiceインタフェースも提供しています。

同様に注目に値するもう一つのプロジェクトは jQuery Ajaxy であり、これはjQuery Historyをミックスにajaxを追加するためのほとんどの拡張です。ハッシュを使ってajaxを使い始めると/ とても複雑になります ！

1
balupton

私はクライアントサイドのルーティングにpath.jsを使っています。私はそれが非常に簡潔で軽量であることを発見し（これもNPMにも公開されています）、そしてハッシュベースのナビゲーションを利用します。

path.js NPM

path.js GitHub

1
Tom

私はjQueryプラグイン、 HUtil を使い、その上に _ yui _ Historyのようなインターフェースを書きました。

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

0
moha297