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

时间:2012-06-03 08:27:12

标签: javascript jquery ajax templates

我正在编写完整的基于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中?

可能看起来有点乱,但提前谢谢!

1 个答案:

答案 0 :(得分: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>

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