0

私は非常によく似たいくつかのページがある小さなウェブサイトを書いています。ほとんどの場合、1つのdivの内容のみが異なります。ナビゲーション、ヘッダーなどは同じままです。最初、私はこれを単一のhtmlファイルと次のようなjavascriptコード(ボタンクリックイベントによってトリガーされる)で実現しました。

 $.get("content/text1.html", function(data) {
    $("#content").html(data);
});

これは非常にスムーズに機能しますが、問題は、アドレスバーのURLがこれらの種類のリクエストで変更されないことでした。したがって、ユーザーが特定のページにリンクすることはできません。#-urlsで可能であることは知っていますが、次のようなURLが必要です。

example.com/talks/foo/bar

そして、いくつかの回避策はありません。

この動作を実現するために、コードを多くのhtmlファイルに変更し、それぞれがこれを実行します。

$.get("content/header.html", function(data) {
    $("#header").html(data);
});
$.get("content/footer.html", function(data) {
    $("#footer").html(data);
});

だから私は私の素敵なURLを取得しますが、今は問題です。全体があまりスムーズではありません。ヘッダーとフッターは本文の数ミリ秒後に表示されるため、すべての新しいページを正しく認識できません。

私の質問は、githubのような人気のあるWebサイトで両方を同時に達成するにはどうすればよいですか?トップバーの[探索]または[ブログ]をクリックすると、すべての「静的」なものが永続的にそこにとどまっているように見えます。そして、彼らのURLを考慮すると、私は彼らがajaxでこれを達成していないと思います。

私が見逃しているものはありますか?

よろしく

4

0 に答える 0