Question

我的设计师认为在不同页面之间创建转换是个好主意。基本上只有内容部分会重新加载（页眉和页脚保持不变），只有内容div应该具有过渡效果（淡入淡出或某种排序）。要创建这种效果并不是真正的问题，让谷歌（分析）开心就是......

我不喜欢的解决方案和原因;

仅使用ajax加载内容div：google将看不到任何内容，这意味着永远不会找到该网站，或者只看到ajax检索到的部分，这些部分根本不是完整页面
显示过渡效果，然后将用户“重定向”到指定页面（捕获元素的点击事件）：效果与仅链接到另一个页面几乎相同，例如。用户仍会看到正在重新加载的页面

我想到了一个可能的解决方案：当访问者单击链接时，捕获事件，使用ajax加载目标，同时显示过渡效果，然后使用ajax请求获取的内容重写整个文档。

至少这将起作用并具有一些优势;网页重新加载将看起来无缝，无论您的互联网连接速度有多慢，谷歌都不会介意，因为ajax内容本身就是一个完整的HTML页面，并且可以按原样进行抓取，即使是非JavaScript浏览器（手机等等）。）不介意，他们只是重新加载页面。

我对实现此方法的犹豫是我会使用ajax重新加载整个页面。我想知道这是否是ajax的意图，如果它会减慢速度。最重要的是，是否有更好的解决方案，例如。我的第一个“坏”解决方案，但略有不同，所以谷歌会喜欢它（分析也是如此）？

感谢您对此的看法！

Answer 1

简短回答：我不建议以这种方式加载整个页面。

答案很长：不推荐。虽然可能，但这并不是XHR / Ajax的真正意图。基本上你正在做的是复制浏览器的本机行为。您将遇到的一些问题：

支持后退/前进按钮。你需要一个URI＃方案解决。
浏览器必须解析通过AJAX整个页面。这会减慢速度。例如。如果你加载一个HTML块浏览器，然后用DOM替换它，只有那时才会有任何脚本，CSS 或其中包含的图像开始下载。
记忆 - 浏览器不会更改页面。过度时间（取决于浏览器），我期望内存使用量增加。
辅助功能。屏幕阅读器需要时通知页面内容已更新。威力不值得关注，但值得提。
缓存。浏览器不知道要缓存哪个页面（超出初始负荷）。
关注点分离 - 您的观点基本上被打破了服务器端件来渲染页面的内容以及静态页面框架的HTML和最后JS将服务器结合起来与浏览器片断。这将随着时间的推移进行维护有问题和复杂。
与其他组件集成 - 你已经看到了问题谷歌分析。你可能会遇到其他相关组件的问题到DOM的时间构成。

对于页面过渡效果是否值得你的电话，但我希望我已经回答了你的问题。

Answer 2

你可以拥有AJAX 和 SEO：Google's proposal。
我认为您可以从Gmail的设计中学到一些东西。

Answer 3

这可能有点奇怪，但我对此有所了解。

使用'ifarme'GET参数准备页面加载。

当'iframe'加载一些javascript以触发父show_iframe_content（）
如果没有'iframe'，只需加载页面，隐藏的iframe元素称为'preloader'

您的目标是确保在“预加载器”中使用额外的“iframe”get参数打开每个链接，并在iframe加载完成后调用show_iframe_content（），将内容复制到你的父页面。

像这样：链接点击 - ＆gt;转换到加载阶段 - ＆gt; iframe已加载 - ＆gt; show_iframe_content（）调用 - ＆gt;将iframe内容复制回父级 - ＆gt;过渡到正常阶段

整件事情很好，因为如果抓取工具访问您的网页，它会在没有'iframe'get参数的情况下执行，因此它可以像平常一样浏览所有网页，但是当您在浏览器中使用它时，你让你的链接做上面的魔术。

这只是它的草图，但我确信它可以做得对。

编辑：实际上你可以用简单的ajax来做，没有iframe，你必须在浏览器中加载后修改页面，用ajax加载链接的内容。抓取工具也应该看到链接。

示例脚本：

$.fn.initLinks = function() {
    $("a",this).click(function() {
        var url = $(this).attr("href");
        // transition to loading phase ...
        // Ajax post parameter tells the site lo load only the content without header/footer
        $.post(href,"ajax=1",function(data) {
            $("#content").html(data).initLinks();
            // transition to normal phase ...
        });
        return false;
    });
};

$(function() {
   $("body").initLinks();
});

Answer 4

Google分析可以跟踪javascript事件，就好像它们是网页浏览一样 - 请点击此处查看实施情况：

http://www.google.com/support/googleanalytics/bin/answer.py?hl=en-GB&answer=55521

我应该用AJAX加载整个html页面吗？

4 个答案: