要散列还是不散列？

Posted 2023-02-22

【中文标题】要散列还是不散列？

【英文标题】：To hashbang or not to hashbang?

【发布时间】：2011-10-09 01:25:52

【问题描述】：

我正在开发一个新网站，我想尽可能多地使用 AJAX。基本上，我希望用户几乎永远不会离开主页，而是让所有内容都显示在弹出窗口、滑块、部分等中。

现在我们现有的网站已经排名很高，所以我也想让 Google 满意。我一直在阅读 Google 的 Making AJAX Applications Crawlable 并了解我必须通过 _escaped_fragment_ 为爬虫提供相同的内容。

问题 我想使用 Umbraco 开发这个网站，它已经提供了对 SEO 友好的 URL。 即

http://www.domain.com/about-us.aspx http://www.domain.com/about-us/our-team.aspx

但问题是我没有一种简单的方法来实现 _escaped_fragment_ 不破解 Umbraco 核心（至少这是我的知识），并使用我在下面发布的解决方案（答案）也会让没有 javascript 的用户满意。双赢局面？你告诉我！ =)

更新 昨天另一位用户（现已删除）的回答建议 Google 不再使用 _escaped_fragment_ 方法，并建议将其排除在外。这是真的？ Google 真的会运行 AJAX 来查看内容吗？

谢谢 马尔科

【问题讨论】：

这样写，看起来更像是一篇博文。您应该采取“解决方案”部分并将其实际发布为答案。作为奖励，您也更有可能吸引其他人的答案。

感谢@Daniel，我已采纳您的建议并将其发布为答案。

@Marko 我理解哈希，但是在 ajaxy 网站的上下文中 bang 与它有什么关系？

@Marko：如果您想奖励 zzzzBov 赏金，我可以投票删除已删除的答案以取消删除它（只有一个人不能取消删除答案）。

对于任何考虑实施 hashbangs 的人，请务必先查看：danwebb.net/2011/5/28/it-is-about-the-hashbangs 和此：blog.benward.me/post/3231388630。如果您正在考虑对 SEO 友好的 URL，那么您不应该考虑 hashbangs。 hashbangs 适用于 applications 而不是 sites

【参考方案1】：

使用 jQuery BBQ 并在页面顶部使用 js 函数来检查是否有有效的哈希，如果有，则重定向到页面。

【讨论】：

我在网上搜索了 jQuery BBQ 酱。我找不到它。我听说它很棒。

【参考方案2】：

您是否也考虑过使用 html5 历史会话管理？

这样您就不必在 newer browsers 中使用哈希值，这样用户就不会注意到任何事情。

有点简化，你会做这样的事情：

编辑：更新示例。

function route(path) 
    $.get(path, function(data) 
        //parse data
    );


if (typeof history.pushState !== 'undefined') 

    $(window).bind('popstate', function(e)
    
        route(window.location.pathname);
    );
    $('a').click(function(event) 
        event.preventDefault();
        history.pushState(,'',this.href);
    );
 else 
    $(window).bind('hashchange', function(e)
    
        route(window.location.hash);
    );
    $('a').click(function(event) 
        event.preventDefault();
        $(this).attr('href', '/#'+$(this).attr('href'));
    );

【讨论】：

但是这样用户就不能为网站上的页面添加书签，因为 URL 永远不会改变。

网址会改变。此行将处理该问题：history.pushState(,'',this.href);

旧浏览器会发生什么？是否有一个脚本可以处理这个跨浏览器？

嗯，您在我的回答中看到的代码 sn-p 正在检查 HTML5 历史管理支持。如果有，请使用它，如果没有，请恢复使用主题标签。

我很喜欢这个主意。我只需要弄清楚如何使用这两种方法来实现我需要的 ajax 功能。

【参考方案3】：

我听取了 @Daniel Pryden 的评论中的建议，并将其作为答案发布。

我曾考虑过这个问题并想——为什么不以老式方式创建网站、实际页面和所有内容，然后执行以下步骤。

使用jQuery拦截首页所有内部链接，并在window.location.pathname前添加一个井号(#)，从而触发hashchange事件。 （见第 3 步） 在除主页之外的所有页面上添加 javascript 重定向以将页面重定向回主页，但在哈希 (#) 后附加 window.location.pathname。例如，Google 抓取了http://www.domain.com/about-us.aspx，但是当用户访问该页面时，他们被重定向到http://www.domain.com/#/about-us.aspx 在主页上，使用 jQuery BBQ 或类似插件来监听 hashchange 事件，包括页面何时加载，以便加载动态内容。 Umbraco 可以配置为根据请求是否为 AJAX 来提供部分或完整页面内容。

这样，没有 Javascript 的用户将拥有一个成熟（半好看）的网站，Google 将毫无问题地抓取所有页面，但使用 Javascript 的用户将始终停留在主页上 - 以及很酷的概念拥有一个 Web 应用程序而不是一个网站将会实现。

【讨论】：

这类似于我在我的网站上所做的。普通链接只是目录/directory/file1，但如果用户访问它，它会重定向到我的主站点，其中包含哈希 (#/directory/file1)。

这正是我所处的位置和我的想法（看到人们实际上更改了 url 而不是仅仅响应点击事件并使用 js 更改哈希值，我真的很惊讶）。我无法克服的一件事是当用户 A 在没有 javascript 的情况下与用户 B 共享带有哈希片段的链接时，使 url 起作用。这是一个小众案例，但你考虑过吗？此外，在 ajax 片段加载之前的初始内容闪烁总是很烦人......

Switz，Google 是否可以抓取您的网站？ @Wesley，UI 已经过开发，因此主页需要 URL 中的哈希值，在这种情况下，它会使 UI 变暗并在加载内容时显示加载栏。我的本地主机上有一个测试用例工作得很好，但不幸的是我还不能上传它。

我的印象是谷歌会惩罚重复的内容——不确定这个解决方案是否会被视为这样