Web 开发最佳实践 - 如何支持 Javascript Disabled答案

【问题标题】：Web Development Best Practices - How to Support Javascript DisabledWeb 开发最佳实践 - 如何支持 Javascript Disabled
【发布时间】：2011-07-19 15:50:01
【问题描述】：

当用户没有启用 JavaScript 时，最好的做法是什么？向这类用户提供内容的最佳方式是什么？保持网站对搜索引擎可读的最佳方式是什么？

我可以想到两种方法来实现这一点，但不知道哪个更好（或者第三种选择是否更好）：

依靠元刷新标记将用户重定向到非 JavaScript 版本的网站。将 meta-refresh 标记包裹在 noscript 标记中，这样使用 javascript 的人就会忽略它。
依靠位于 body 标记内的 iframe 标记来提供非 JavaScript 版本的网站。将 iframe 标记包裹在 noscript 标记中，这样使用 javascript 的人会忽略它。

我也很欣赏有关正确或不正确方法的高调示例。

--------- 问题补充-----------

这是我过去为解决此问题所做的一个示例：http://photocontest.highpoint.edu/

我想确保没有更好的方法来做到这一点。

【问题讨论】：

如果你正在为 JavaScript 编码，然后考虑没有它该怎么办，那你就错了。
最好的方法是progressive enhancement。或者你忽略非 JavaScript 用户。
和优雅降级
我还没有为这个项目编写任何代码。只是想在我开始之前想出最好的计划。我必须通过这个项目（搜索引擎索引）来支持非 JavaScript 用户。
我要问的第一个问题是你的目标用户是谁，他们可能会使用屏幕阅读器或没有javascript的移动设备等。

标签： javascript seo noscript

【解决方案1】：

您还有另一种选择，只需加载相同的页面，但使其适用于 noscript 用户（渐进增强/优雅完全降级）。

一个简单的例子：您想使用 ajax 将内容加载到 div 中，使用新内容创建一个 <a> 标记链接到整个页面（noscript 行为）并将<a> 标记与 jQuery 绑定以拦截点击并使用 ajax 加载（脚本行为） .

$('a.ajax').click(function(){
var anchor = $(this);
$('#content').load(anchor.attr('href') + ' #content');
return false;
});

【讨论】：

【解决方案2】：

我不完全确定渐进增强现在是否被认为是最佳实践，但这是我个人喜欢的方法。在这种情况下，您编写服务器端代码，使其像标准 Web 1.0 Web 应用程序（无 JavaScript）一样运行，以提供至少足够的功能让系统在没有 JavaScript 的情况下工作。然后，您开始在此之上分层 JavaScript 功能，以使系统更加用户友好。如果做得好，您最终应该会得到一个至少提供足够功能对非 JavaScript 用户有用的 Web 应用程序。

一个相关的过程称为优雅降级，它以类似的方式工作，但首先假设用户启用了 JavaScript，并针对他们不启用的情况构建解决方法。然而，这有一个缺点，如果你忽略了一些东西，你可能会让非 JavaScript 用户没有后备。

搜索页面的渐进增强示例：构建您的搜索页面，使其通常只返回搜索结果的 HTML 页面，但还添加一个可以通过 GET 设置的标志，当设置时，它返回 XML 或 JSON。在搜索页面上，包含一个脚本，该脚本对搜索页面执行 AJAX 请求，并将标志附加到查询字符串上，然后将页面的主要内容替换为 AJAX 调用的结果。 JavaScript 用户可以从 AJAX 中受益，但没有 JavaScript 的用户仍然可以获得可用的搜索页面。

http://en.wikipedia.org/wiki/Progressive_enhancement

【讨论】：

【解决方案3】：

您正在谈论优雅降级：设计和制作网站以使用 javascript，然后让网站在关闭 javascript 的情况下仍然可以使用。最简单的做法是在页面顶部附近的某处包含 html“noscript”标签，该标签会显示一条消息，指出该站点需要 javascript，否则将无法正常工作。 SO 就是一个很好的例子。屏幕顶部的大多数按钮都是通过 javascript 运行的。关闭它，你会得到一个漂亮的红色横幅，并且下拉 js 效果消失了。

我更喜欢渐进式增强开发。让网站在没有 javascript / flash / css3 / 的情况下完整运行，然后一点一点地增强它（仍然包括 noscript 标签）以改善用户体验。无论您是使用屏幕阅读器或搜索引擎的残疾用户，这都能确保您拥有一个完全正常工作、可读的网站，同时为使用较新浏览器的用户提供良好的用户体验。

底线：对于任何动态生成的内容（例如通过 AJAX 生成的页面元素），必须有一个静态页面替代方案，其中该内容必须通过标准链接提供。如果您将 javascript 用于选项卡式内容，请以与网页其余部分一致的方式显示所有内容。

一个例子是http://www.bbc.co.uk/news/ 关闭 javascript，您将拥有一整页的书面内容、图片、链接等。打开 javascript，您将获得滚动新闻故事、选项卡式内容、滚动图片等。

我要调皮了，贴出维基百科的链接：

Progressive Enhancement

Graceful Degredation

【讨论】：

感谢您提供真实世界的示例。

【解决方案4】：

如果您的应用程序必须有 javascript 来运行，那么除了在 noscript 标记中显示礼貌消息之外，您无能为力。

否则，您应该反过来思考。

在没有 JS 的情况下构建您的网站
提供出色的用户体验并使其功能齐全功能
添加 JS 并使 UX 更加实用。将 JS 分层。

因此，如果用户没有 JS，您的网站仍然会恢复到您的网站状态的第二步。

至于爬行。如果您的网站依赖于 AJAX 和大量 JS 工作，您可以让 gogole 意识到它：http://code.google.com/web/ajaxcrawling/docs/getting-started.html

【讨论】：

谢谢！该 Google Ajax 网站抓取指南会很有帮助。

【解决方案5】：

一个可能对您有所帮助的快速提示：只需安装 lynx，一个命令行网络浏览器，您就会立即看到 google 和其他 seo 如何看待您的网站（以及盲人）。这非常有用。当然，在命令行窗口中，没有图形并且javascript被禁用。

【讨论】：

【解决方案6】：

如果您正在使用“严肃的”Ajax（例如客户端路由），以下技术可能会很有用：

使用不带 GET/"?" 参数的 URL（它让您以后的生活更轻松）
使用http://baseurl.com/#!/path/to/resource 进行客户端路由
在http://baseurl.com/path/to/resource 处实现您网站的非脚本 HTML 版本的呈现（HTML 快照是 Google 所称的）
将 HTML 快照的全部内容包装在 noscript-tags 中，并通过 top.location.href 重定向到网站的完整版本
处理http://baseurl.com/?_escaped_fragment=/path/to/resource - 它应该通过301响应重定向到http://baseurl.com/path/to/resource
仅对 GET 链接使用 a-tag，对 POST/PUT/DELETE 链接使用表单 - 必要时取消它们的样式

我在研究“如何编写正确的 Ajax 代码”时发现的链接的一个很好的示例代码：

<a href="/path/to/resource" onclick="Routing.navigate(&quot;/path/to/resource&quot;); return false;">Resource</a>

这当然是一个相当复杂的解决方案，但它应该同时启用 SEO（包括非搜索引擎爬虫）和可访问性。问题是您必须能够在服务器端和客户端呈现页面。

一种解决方案可能是使用诸如 mustache 之类的模板框架，其中存在针对不同平台的实现。

对页面的动态部分使用类似 {{#pagelet}}/path/to/partial{{/pagelet}} 的内容 - 例如：{{#pagelet}}/image/{{image_id}}/preview{ {/pagelet}}
在您的客户端渲染中，pagelet 将被实现为动态替换为通过 Ajax 加载的内容（例如：render）
在您的服务器端呈现中，pagelet 将直接呈现（毫无疑问，只需卷曲 pagelet 并立即呈现它 - 或者如果您可以异步编写代码，就像您在客户端执行它一样：编写一些临时 span 到缓冲区中，开始获取所有 pagelet，在 pagelet 到达时替换临时 span，并在呈现所有 pagelet 后刷新缓冲区。

这是迄今为止我发现的最好的通用设计。您可以深度链接到您的应用，它对搜索引擎很友好，它应该会强制您构建一个优雅降级的页面。

P.S.：上述技术的一个优点是页面的 Ajax 和“Web 1.0”呈现都可以从整个 pagelet 的 memcached 缓存中受益。

【讨论】：

感谢所有伟大的建议！

【解决方案7】：

我更愿意在没有 javascript 的情况下对页面进行编码，然后如果启用了 javascript，我们会将用户重定向到使用 javascript 的类似页面。（与渐进增强的概念相同）

redirecting with javascript

【讨论】：