在动态内容中有效使用 Hashbang、JavaScript、PHP 和 AJAX

Question

我一直在为我开始开发的桌面应用程序构建一个网页，我真的很想利用 HTML5 技术和 JavaScript 的动态内容。基本上，如果用户在浏览器中访问“根”页面（index.php，或只是目录名称），信息、关于、常见问题解答和联系表单部分都将可见（联系表单除外；单击其部分的标题将触发 jQuery 动画来显示它）。页面左侧有一个基本导航，其中包含主页、关于、常见问题解答和联系方式的链接。这些链接的锚点分别是“#!/home”、“#!/about”、“#!/faq”和“#!/contact”。单击其中之一时，JavaScript/jQuery 将隐藏除页眉、页脚和 hashbang 所属部分之外的所有元素（对于联系表单，它还将删除该部分页眉的单击处理程序，因为它当它是页面的唯一内容时，不需要也不应该被隐藏）。目前我正在使用这个：

window.onload = (function() {
    switch(location.hash) {
    case "#!/contact":
        $("body > *:not(section#contact, nav, header, footer)").hide();
        $("#contact > #labels, #contact > form").slideDown('slow');
    // and similar for the other hashbang URIs
    }

    if (location.hash == "#!/" || location.hash == "#!/home" || !eval(location.hash)) {
        $("a[href='#!/contact']").click(function() {
            $("#contact > #labels, #contact > form").slideDown('slow');
        });
    }
    // similar for the other hashbangs
});

我几乎可以肯定有更好的方法来做到这一点，而且我还想确保此页面及其动态内容可以被 Google 机器人正确抓取。我应该使用 PHP 来正确执行此操作吗？为何如此？

谢谢！

Answer 1

Chris Coyier 的 CSS 技巧视频教程一些实施此类事情的最佳实践。要点是确保您的应用程序在打开或不打开 JavaScript 的情况下都可以运行。