如何让JavaScript在禁用Javascript的情况下“优雅地降级”？

我已阅读过多篇文章，如果用户禁用JavaScript，理想情况下，您的页面应该“优雅地降级”。总的来说，我不确定应该采取哪些类型的措施来实现这一目标。如何让JavaScript在禁用Javascript的情况下“优雅地降级”？

我有一个用于配置'计划'的HTML blob。根据选择框的值，显示不同的字段。

<select name="schedule.frequency" 
    id="schedule.frequency" 
    onChange='updateScheduleFields()' > 
     <option value="Manual">Run Manually</option> 
     <option value="Monthly">Monthly</option> 
     <option value="Weekly">Weekly</option> 
     <option value="Daily">Daily</option> 
     <option value="Hourly">Hourly</option> 
</select>

当选择更新，我隐藏显示，这样，当它是不恰当的东西，如“一周中的一天”或“每月的天不显示的字段。我真的不确定如何在没有Javascript的情况下降级，因为如前所述，某些字段对于各种日程安排类型来说完全不合适。

我的问题是：一般来说，我将如何做一些禁用/隐藏不适当的字段或做一些前处理/后处理没有Javascript正确降级？

我也有兴趣在特定的网站，我可以看看，处理这种退化很好吗？

来源

2010-08-21 Shawn D.

其基本思想是你有一个标准（非JS）的方式做事，然后你添加JavaScript来覆盖该默认行为。

对于你的情况，你有一个select，所以非js的行为将会是，当你选择一个选项时，你提交一个表单，加载一个新版本的页面，显示不同的字段。

您的JavaScript（如果启用）将隐藏提交按钮并进行就地更新。

思考它的首选方法是progressive enhancement，而且这样做更容易。使页面以纯粹的HTML工作，然后逐步使用CSS和JavaScript进行增强。那么你永远不必研究它是否会优雅地退化。

如果您的JavaScript和CSS处于单独文件而不是内联格式，则可以更轻松地进行渐进式增强。使用jQuery *之类的Ajax库，您可以使用CSS选择器选择元素，以便为这些元素添加行为。在你的情况下，你会做$('#schedule_frequency').change(updateScheduleFields)（我不认为你应该有一段时间在你的ID）。

*免责声明：可以在没有库的情况下在JavaScript中选择HTML元素，并且存在除jQuery之外的其他Ajax库。

来源

2010-08-21 14:09:17 Skilldrick

谢谢。我想，当我开始设计网页时，我将不得不改变我的想法。 – 2010-08-21 17:13:41

@Shawn D.是的，这确实需要相当的转变。但是有很多优点，例如可访问性，并使您的网站可用于更大范围的设备。 – Skilldrick 2010-08-21 17:28:19

听起来好像这样做的方法是在启用Javascript时优雅地升级。再次感谢。 – 2010-08-21 18:32:11

当您考虑优雅地降级网站时，请考虑如何在不使用任何JavaScript的情况下使用本网站。然后使用JavaScript和onload/ready钩子将您网站的元素更改为您最初使用javascript所需的元素。这样，如果JavaScript被禁用，该网站的工作。如果启用，安装JavaScript将运行并转换页面。

通常这意味着有一个额外的“提交”按钮，您的设置JavaScript隐藏或类似的东西。

来源

2010-08-21 14:10:16

我相信简短的回答是，你不会做这些类型的事情。通过JavaScript实现对渲染页面的运行时修改 - 当它被禁用时，您不会使用这些类型的效果。

此外，您不会在没有JavaScript的情况下进行事前处理。您需要在后端实施您的检查/测试。

来源

2010-08-21 14:10:46

在这种情况下，我会做的是在下拉列表下方有一个“下一步”按钮，将选择过帐到服务器。然后，您需要服务器端逻辑来显示/隐藏字段。我通常会首先以这种方式工作，然后返回并添加Javascript flair来隐藏按钮并阻止往返。

来源

2010-08-21 14:20:25

回答

相关问题