0

私は完全な AJAX ベースの Web サイトを書いています。現在、ページのリロードなしでページのナビゲーションとコンテンツの表示を行っています。それが私がそれを行うことに決めた方法です：

<html>
<head>
    <!--CSS-->
        .hidden {display:none;}
</head>
<body>
    <!--Menu bar-->
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;">Page1</a>
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;">Page2</a>
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;">Page3</a>

    <!--Content blocks for different pages-->
    <div class="current" id="page1">
        <!--Page 1 content-->
    </div>
    <div class="hidden" id="page2">
        <!--Page 2 content-->
    </div>
    <div class="hidden" id="page3">
        <!--Page 3 content-->
    </div>

    <!--JS for managing pages links-->
    <script>
        $(document).ready(function() {
        });
        function loadPage1() {
            $('.current').hide();
            $('#page1').show().addClass('current');
        };
        function loadPage2() {
            $('.current').hide();
            $('#page2').show().addClass('current');
        };
        function loadPage3() {
            $('.current').hide();
            $('#page2').show().addClass('current');
        };
    </script>
</body>

1) まず最初に、クラス "current" の page1 ブロックを表示し、他のブロックはクラス "hidden" を持っています。および show page2 ブロック。

注意。$(document).ready(function() {$('#page2').hide();$('#page3').hide();} であるため、最初のページ ブロックに追加のクラス hidden を使用する必要があります。 ); 少し遅いようで、ページが完全に読み込まれる前に、ユーザーが何かおかしいことに気付くかもしれません。

私のソリューションは機能しますが、いくつかの問題があります。

* 1) *実際には、JS に障害のあるユーザーの場合、実際のページを作成する必要がありますが、表示される開始ブロックが異なります。つまり、1 つの違い (非表示と表示の異なる開始ブロック) で多くの同様のページを作成する必要があります。Google が私のサイトをクロールした場合、私のサイトはコンテンツの二重化と見なされて禁止されませんか?

* 2) *例えば2ページ目は画像が大きいです。ページの開始時 - 非表示です。ただし、最初は表示されなくても、ロードするのに時間がかかります。それを管理する方法は？オンデマンドでコンテンツを読み込みますか? つまり、6 つのテンプレート テキスト ファイルを作成し、ユーザーがページを要求すると、JS はファイルからページ コンテンツをロードして div に配置します。

面倒くさいかもしれませんがよろしくお願いします！

4

1 に答える 1

1

まず、クロール可能な Ajax ページのドキュメントをこちらで読むことをお勧めします
https://developers.google.com/webmasters/ajax-crawling/

そして、あなたの例では、悪い習慣ですが、Googleonclick="loadPage1(); return false;はリンクが好きではありません

<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;">Page1</a>
<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;">Page2</a>
<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;">Page3</a>

そのほうがいい

<a href="link_to_real_page_for_JS-disabled-users" data-page="#page1">Page1</a>
<a href="link_to_real_page_for_JS-disabled-users" data-page="#page2">Page2</a>
<a href="link_to_real_page_for_JS-disabled-users" data-page="#page3">Page3</a>

スクリプト コードを次のように変更します。

<script>
//$(document).ready alternative
$(function () {
    //cache links so you can access faster for later use.
    var $links = $("a[data-page]").on("click", function (e) {
        var $this = $(this),
            page = $this.data("page");
        $(page).addClass("current")
            .siblings("div.current").removeClass("current").hide()
            .end().show();
        e.preventDefault();
    });
});
</script>

コードをさらに最適化できます。ちなみに、コードはテストしていません。

于 2012-06-03T11:23:17.173 に答える