如何通过JavaScript禁用JavaScript使我的UI“优雅地降级”？

Question

我已经在多个帖子中阅读了有关用户禁用JavaScript的文章，理想情况下，您的页面应该“优雅地降级”。我不确定应该做什么类型的事情来实现这一目标。

我有一个用于配置“时间表”的HTML斑点。根据选择框的值，显示了不同的字段。

<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>

When the select is updated, I hide the fields that are shown so that things like 'day of the week' or 'days of the month' aren't shown when it's inappropriate.我不太确定如何在没有JavaScript的情况下优雅地降级，因为如前所述，某些字段完全不适合各种时间表类型。

我的问题是： 通常，我将如何制作禁用/隐藏不适当的领域的东西，或者在没有JavaScript的情况下进行某些预/后处理的降级？

我也对可以很好地看待这种类型的退化的特定网站感兴趣吗？

Answer 1

基本想法是，您有一种做某事的标准（非JS）方式，然后将JavaScript添加到覆盖该默认行为中。

在您的情况下，您有一个 select, ，因此非JS的行为是，当您选择一个选项时，您提交一个表单，该表单加载了带有不同字段的页面的新版本。

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

首选的思考方式是 渐进式增强, ，而且要实现这一目标要容易得多。使您的页面作为Barybones HTML工作，然后用CSS和JavaScript逐步增强它。那么，您永远不必锻炼它是否会优雅地降解。

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

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

Answer 2

当您考虑优雅地降低网站时，请考虑如何在没有任何JavaScript的情况下使用该网站。然后，使用JavaScript和Onload/Ready Hook将网站的元素更改为您最初想要的JavaScript的内容。这样，如果JavaScript被禁用，则该网站可以工作。如果已启用，则设置JavaScript将运行并转换页面。

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

Answer 3

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

Answer 4

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

此外，如果没有JavaScript，您将不会进行前处理。您需要在后端实现检查 /测试。