私はAjaxスタイルのWebサイトを作成したい小さなプロジェクトに取り組んでいます。コンテンツはjQueryのload()
で読み込まれます。ご存知のように、これの欠点は、表示されるコンテンツに応じてURLが変更されないことです。これを機能させるには、pushState()
を使用できます。これはクロスブラウザでサポートされていないため、プラグイン_history.js
_を使用しました。
これは非常にうまく機能していますが、問題は、戻るボタンと進むボタンが正常に機能しておらず、何が間違っているのかわからないことです。 URLは正しく変更されており、コンテンツも変更されていますが、タイトルはまったく変更されていません。タイトルとは、ブラウザウィンドウのウィンドウ(またはタブ)のタイトルとして表示されるものを意味します。つまりロードされたページの_<title>
_ ORそのページを参照するリンクのタイトル属性(同じです)。これは、次の事実と関係があると思います。タイトルが必要なページのセクションのみを呼び出します(つまり、load()
に_#content
_を追加します)。それでもそのページのタイトルが必要です。これが私のテストケースです。 (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:history.jsと独自のスクリプトを基に構築したいので、_< HTML5
_ブラウザーのサポートを維持します。私はこれを好む。1。これはうまくいく必要があることを知っている、何かがうまくいかないだけだ。 2.まったく新しいスクリプトを理解するのではなく、自分の解決策を見つけて、すでに作成したスクリプトに実装できれば、時間を節約できます。
注2:賞金は私の質問(3)のすべてに答えることができる彼または彼女にのみ与えられます!
回答1-前後に移動するときにタイトルが機能するようにします
私が理解した限りでは、リンクからドキュメントタイトルhtmlを変更したいのですが、divにロードされています。 jQuery _.load
_を介してdivにファイルをロードする場合、ajaxリクエストの後に完全な応答テキストを挿入するだけです。したがって、title
またはmeta
タグのようなdivに含めるべきではないすべてのものを使用します。ただし、現在のドキュメントのタイトル(_http://bramvanroy.be/sectionLoaderTest/index.html
_)は、div内のtitle
タグではなく、head
タグ内にあるtitle
で定義されています。そのため、ドキュメントのタイトルは変更されません。
では、どうすれば修正できますか?
良い質問です。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からhtml
、head
、およびbody
タグを解析しているが、子要素を削除していないためです。
回答2-メインページの読み込み時間を最適化します
ドキュメントは上から下にロードされています。
したがって、最初にcss、JavaScriptなどをロードしてから、メインドキュメントをロードする必要があります。 jQueryは実行前に常にドキュメントを待機しているため、すべてのscript
要素を本文の最後の直前に配置して、HTMLを前にロードできるようにすることはそれほど悪い考えではありません。
ところで、私は最初にこの問題を抱えていましたが、その後すべてがキャッシュされ、ドキュメントが非常に高速に読み込まれていました。
回答3-前後に移動するときのアクティブクラスを修正します
href
要素のa
属性をループして、History.getState()
のデータと比較します。簡単なはずです。
コードにいくつかの間違いをしました-修正されたコード:
ハッシュ_#content
_をすべてのURLに追加しました。意味がなく、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();
});
});
});
_
davis.jsやjQuery Pusherなどの利用可能なルーティングプラグインを試すこともできます https://github.com/salvan13/jquery-pusher