Question

我正在编写完整的基于AJAX的网站。现在我正在进行页面导航和内容显示而不重新加载页面。这就是我决定这样做的方式：

<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块，其他块显示“隐藏”类 2）当我们点击loadPage2（）时，我们找到当前活动的块（按它的类“当前”）并隐藏它，并显示show page2块。

NB。我必须为第一个页面块使用隐藏的其他类，因为$（document）.ready（function（）{$（'＃page2'）。hide（）; $ （ '＃3页'）隐藏（）;}）;似乎有点慢，用户可能会在页面完全加载之前发现一些奇怪的东西。

虽然我的解决方案有效但存在一些问题：

* 1） *实际上，对于JS-disabed用户，我仍然需要做真实的页面，只是显示了不同的起始块。这意味着我将不得不做很多类似的页面，只有一个区别 - 隐藏和显示不同的起始块。如果Google抓取我的网站，是否会将我的网站视为内容加倍并禁止它？

* 2） *例如，第2页有大图像。页面开始时 - 它是隐藏的。然而，加载它需要花费很多时间，即使它最初也不会显示。如何管理？按需加载内容？我的意思是创建6个模板文本文件，当用户请求页面时，JS从文件中加载页面内容并将其放入div中？

可能看起来有点乱，但提前谢谢！

Answer 1

首先，我建议您阅读此处可抓取的Ajax页面的文档
https://developers.google.com/webmasters/ajax-crawling/

对于你的例子，这是一种不好的做法，谷歌不喜欢链接中的onclick="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>

您可以更多地优化代码，顺便说一下我没有测试代码。

JS - 关于完整的AJAX网站的一些问题 - GoogleBot，优化，模板

1 个答案: