web-dev-qa-db-ja.com

jquery.history.js VS jquery-hashchange

http://balupton.github.io/jquery-history/demo/ を参照してください

Jquery.history.jsに魅了されました

私が見つけた間

http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/

2番目はJQueryに基づいているだけだと思います。つまり、jQuery以外の追加のプラグインは必要ありません。

Jquery.history.jsで特別なものは何ですか？ハッシュ変更よりも？.

ブラウザの戻るボタンと進むボタンをオーバーライドするには、どちらを使用する必要がありますか？

jqueryhtml5history.jshashchange
18
Kuttan Sujith

編集-2013年後半

「sammy.js」と呼ばれる別のハッシュライブラリも人気があります。ニースのクライアント側ルーティングマップがあります。クライアント側のルーティング構造はhashchangeイベントを処理するために使用されるため、これを使用して、一部のページに単一アプリのような機能を提供できます。詳細については https://github.com/quirkey/sammy/wiki/Presentations をご覧ください。

また、以下の例では、通常のリンクを使用する必要はほとんどありません。 on clickイベントにバインドできる限り、ボタン、li、ajaxレスポンシブリンクとして必要なものを使用できます。使用するルーティングパラメータは、クリックされた要素のデータ属性、またはクリックされた要素を介して識別可能な他の場所に保存されます。 JavaScriptディクショナリオブジェクト内。 on-clickイベントが発生した後、必要なルート値を取得し、html5プッシュ状態、jquery-bbq-Push状態、ハッシュバンギングなどを使用できます。

概要history.jsおよびjquery-bbqライブラリは、ajaxを起動したときまたはページイベントで状態を維持するために使用されます。これらのライブラリを使用してブラウザの履歴に関する情報を保存するか、URLを操作して、ページの[進む]ボタンと[戻る]ボタンを使用して、ajax呼び出し、タブ変更、画像ブラウジング、実際に履歴ログをバインドしたいものを使用できます。両方のライブラリには、基本的な使用法のために多少似たAPIがあります。

History.js新しいhistory.jsライブラリは、pushstateとpopstateにhtml5ブラウザー標準を使用し、ブラウザーがサポートしていない場合はhashchangeアプローチにフォールバックしますhtml5 pushstate。 Pushstateを使用すると、URLをブラウザバーにプッシュすることができます。ページをリロードせずにURLを変更できます。メインリポジトリは https://github.com/browserstate/history.js です

これを使用するには、（a）スクリプトファイルを含め、（b）「statechange」イベントにバインドし、（c）statechangeイベントを処理し、（d）wnat-ユーザーがクリックしたときなどにstatechangeイベントをトリガーします。

注：ユーザーが進むボタンまたは戻るボタンを押すたびに、状態変更イベントが発生します。バインドメソッド/ハンドラー内で、対応する状態を取得するメソッドを呼び出します。 （1）メソッド/関数History.getState（）を使用して、プッシュしたページ履歴に基づいてサーバーからデータを取得できます。Stateオブジェクトに任意の変数を格納できます。通常、URLを保存します。 （0）誰かが履歴を追跡したい（非ページ更新）リンクをクリックするたびに、履歴状態を取り込む必要があります。

（0）

   $("#navbar").on("click","li[data-ajax-link='true']", function(e) {
        var url = $(this).data('uri');
        var target = $(this).data('target');
        var title = $(this).data('text');
        History.pushState({ url: url, target: target }, title, url);
    });

（1）

History.Adapter.bind(window, 'statechange', function() {
       updateContent(History.getState());
});

（2）

 var updateContent = function(State) {
        var url = State.data.url;
        var $target = $(State.data.target);
        ajaxPost(url, $target);
  };

[〜＃〜] bbq [〜＃〜]

ベン・アルマンの図書館jquery-bbq.jsはハッシュを使用してブラウザーの履歴を制御します。古いブラウザに完全に準拠しています（hashchangeはhtml4技術のようなものです）。

リンクのデフォルトの動作を変更する場合、リンクをクリックすると、（4）リンクポストバックをインターセプトし、デフォルトのアクションを防止し、$。bbq.pushstateを呼び出すことができます。このpushstateメソッドは、ハッシュマークの後、内部のアイテムをURLにプッシュします。 （5）URLハッシュのこの変更は、バインドする「hashchange」イベントを呼び出します。 （5続き）hashchangeイベントでは、$。bbq.getState（ "paramname"）を使用して、ハッシュの後に "paramname"を持つlastetパラメーターを取得します。ブラウザは通常の履歴のハッシュを処理するため、これは便利です。そのため、sombodyが前後にクリックすると、前または次のハッシュ状態が読み込まれます。これを使用してアプリケーションでajaxを頻繁に使用する場合は、ajaxポストバックを実行して、以前にハッシュに配置されていたURLを取得します。これを使用する方法の別の例については、 JQuery BBQ：URLを保存する場所 に対する最近の回答をご覧ください。

BBQ履歴サンプルの使用法

（4）

 $("a[data-custom-ajax-link='true']").click(function (e) {
    var target = $(this).data('target');
    var url = $(this).attr('href');
    $.bbq.pushState({ url: url, target: target });
    e.preventDefault();
});

（5）

$(window).bind("hashchange", function(e) {
    var url = $.bbq.getState("url");
    var $target = $($.bbq.getState("target"));
    var frame = $.bbq.getState("target");


    $.ajax({
        url: url,
        data : null,
        type: "POST",
        beforeSend: function (xhr) { xhr.setRequestHeader('X-Target', frame); },
        success: function (data) {
            $target.html(data);
        }
    });


});

これらのプラグインの使用方法の基本を含めただけです。これらのプラグインを使用して、タブ、リンク、またはajaxの読み込みで進むボタンと戻るボタンの使用を管理できます。

どちらが「優れている」かについては、言うのは難しいです。 History.jsは、〜.5年で完全に成熟したときに優れたライブラリになります（まだベータ版ですが、将来への良い賭けです。GitHubサイトでの多数の未解決の問題とブランチに注意してください）。 jquery-bbqは3年前とは異なり、jquery 1.9に準拠するように更新されていません。良いニュースは、それらが非常によく似た実装と機能を持っているため、どちらかを切り替えるのに悪くないことです。

History.jsは、もう少し互換性があります。そのAPIを見てください（ https://github.com/browserstate/history.js

比較のために、bbqのAPIはページにあります http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html 履歴部分だけではありません。

36
user1778606

ブラウザの[戻る]ボタンと[進む]ボタンをオーバーライドすることはできません。これは、セキュリティ上の理由により、各ブラウザ内で仕様によるものです。

これらのスクリプトはすべて、ブラウザーのdocument.locationまたはdocument.hashを変更し、ブラウザーの[戻る]または[進む]ボタンが使用されるタイミングを追跡し、ブラウザーの現在のハッシュ状態を取得します。

誤解しないでください。すばらしいスクリプトですが、戻るボタンと進むボタンを完全にオーバーライドすることはできません。

2
KaraokeStu