6

私はAjaxスタイルのウェブサイトを作成したい小さなプロジェクトに取り組んでいます。コンテンツはjQueryで読み込まれload()ます。ご存知の方もいらっしゃると思いますが、これの欠点は、表示されるコンテンツに応じてURLが変更されないことです。この作業を行うには、を使用できますpushState()。これはクロスブラウザでサポートされていないため、プラグインを使用しましたhistory.js。

これは非常にうまく機能していますが、問題は、戻るボタンと進むボタンが正常に機能しておらず、何が間違っているのかわからないことです。URLは正しく変更されており、コンテンツも変更されていますが、タイトルはまったく変更されていません。タイトルとは、ブラウザウィンドウのウィンドウ（またはタブ）のタイトルとして表示されるものを意味します。つまり<title>、ロードされたページの、またはそのページを参照するリンクのタイトル属性（これらは同じです）。タイトルが必要なページのセクションのみを呼び出すという事実と関係があると思います（つまり、に追加#contentすることによってload()）。それでもそのページのタイトルが欲しいです。これが私が今まで持っているもののテストケースです。（2013年12月28日以降は使用できなくなりました。）jQueryファイル：

$(document).ready(function () {
    var firstLink = $("ul > li:first-child > a");
    var menuLink = $("ul > li > a");
    var firstLoadedHtml = firstLink.attr("href") + " #content";

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast");
    firstLink.addClass("active");   

    menuLink.click(function(e) {
        history.pushState(null, null, this.href);

        e.preventDefault();
        e.stopImmediatePropagation();

        var CurLink = $(this);
        var newLoadedHtml = CurLink.attr("href") + " #content";
        var oldSection = $(".contentPage");

        $("#sectionContainer").hide().load(newLoadedHtml).fadeIn("fast");
        menuLink.removeClass("active");
        CurLink.addClass("active");
    });

    $(window).bind('popstate', function() {
            var returnLocation = history.location || document.location;

            $('#sectionContainer').load(returnLocation + "#content");
    });
});

また、基本ページ（つまり、/ sectionLoaderTest /）に戻ると、最初のページのコンテンツが読み込まれるまでしばらくの間空白になることにも注意しました。これを最適化する方法はありますか？

さらに、jQueryを使用して、クリックされたリンクにアクティブクラスを追加しています。これが履歴に応じて変化することをどのように確認できますか？ユーザーが戻ったときに正しいリンクが強調表示されるようにするには？

したがって、3つの質問は次のとおりです。

  1. 前後に移動するときにタイトルを機能させる
  2. メインページの読み込み時間を最適化する
  3. 前後に移動するときにアクティブクラスを修正する

すべての助けを歓迎します！

注1：history.jsと自分のスクリプトを基に構築したいので、< HTML5ブラウザーのサポートを維持します。1.これが機能しなければならないことはわかっていますが、何か問題が発生しています。2.まったく新しいスクリプトを考え出すのではなく、自分の解決策を見つけて、すでに作成したスクリプトに実装できれば、時間を節約できます。

注2：バウンティは私のすべての質問に答えることができる彼または彼女にのみ与えられます（3）！

4

2 に答える 2

11

回答1-前後に進むときにタイトルを機能させる

私が理解した限りでは、リンクからドキュメントタイトルhtmlを変更したいのですが、divにロードされています。jQueryを介してdivにファイルをロードする場合.load、ajaxリクエストの後に完全な応答テキストを挿入するだけです。titleしたがって、 ormetaタグのようなdivに含めるべきではないすべてのものを使用します。ただし、現在のドキュメントのタイトル（ ）は、div内のタグではなく、タグ内にあるhttp://bramvanroy.be/sectionLoaderTest/index.htmlで定義されているため、ドキュメントのタイトルは変更されません。titleheadtitle

では、どうすれば修正できますか？

良い質問です。title要素内のdiv要素が無効であるため、ほとんどのブラウザはそれを削除するため、これを使用することはできません。

document.title = $("#sectionContainer title").text();

title要素が存在しない可能性があるためです。

したがって、必要なのはjQuery.load関数からの直接応答です。関数にコールバック引数を追加することで取得できます。

$("#sectionContainer")
    .hide()
    .load(newLoadedHtml, function(responseText) {
        document.title = $(responseText).filter("title").text();
    })
    .fadeIn("fast");

あなたが理解できないかもしれないのは、なぜ私が関数.filterではなくを使用するのかということ.findです。これは、jQueryが一種の解析htmlでheadありbody、htmlからタグを付けますが、子要素を削除しないためです。

回答2-メインページの読み込み時間を最適化する

ドキュメントは上から下に読み込まれます。

したがって、最初にcss、JavaScriptなどをロードしてから、メインドキュメントをロードする必要があります。scriptjQueryは実行前に常にドキュメントを待機しているため、HTMLを前にロードできるように、すべての要素を本文の最後の直前に配置することはそれほど悪い考えではありません。

ところで、私は最初にこの問題を抱えていましたが、その後すべてがキャッシュされ、ドキュメントが非常に高速に読み込まれていました。

回答3-前進および後退するときにアクティブクラスを修正する

要素のhref属性をループして、からのデータと比較します。簡単なはずです。aHistory.getState()

あなたはあなたのコードでいくつかの間違いをしました-あなたの修正されたコード：

すべてのURLにハッシュ#contentを追加しました。意味がなく、jQueryによって再び削除されます：https ：//github.com/jquery/jquery/blob/master/src/ajax.js#L617 （行：158、190、337、617-ハッシュは6行目にあります）

$(document).ready(function () {
    var firstLink = $("ul > li:first-child > a");
    var menuLink = $("ul > li > a");
    var firstLoadedHtml = firstLink.attr("href");

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast");
    firstLink.addClass("active");   

    menuLink.click(function(e) {

        e.preventDefault();
        e.stopImmediatePropagation();

        var newLoadedHtml = $(this).attr("href");

        History.pushState(null, newLoadedHtml, newLoadedHtml);

        $("#sectionContainer")
            .hide()
            .load(newLoadedHtml, function(responseText) {
                document.title = $(responseText).filter("title").text();
            })
            .fadeIn("fast");
    });

    History.Adapter.bind(window, "statechange", function() {
        menuLink.removeClass("active");
        $("a[href='" + History.getState().title + "']").addClass("active");
        $('#sectionContainer').load(document.location.href, function(responseText) {
            document.title = $(responseText).filter("title").text();
        }); 
    });
});
于 2012-05-19T16:37:14.407 に答える
0

また、 davis.jsやjQuery Pusher https://github.com/salvan13/jquery-pusherなどの利用可能なルーティング プラグインを試すこともできます。

于 2013-07-10T07:05:00.783 に答える