如何讓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

回答

相關問題