爲javascript腳本支持和不支持而設計的網站

好的我知道，禁用JavaScript可以讓您的網站正常工作，這一點很重要。爲javascript腳本支持和不支持而設計的網站

在我看來，開始思考如何設計這樣的網站的一種方法是在主頁上檢測JavaScript，如果它沒有啓用重定向到另一個版本的網站，不JavaScript代碼和純HTML工作（如Gmail）

我想到的另一種方法是，例如在網頁上的對話框中想到一個X（關閉按鈕）。如果在沒有任何JavaScript干擾的情況下按下X會導致向服務器發送請求，並且在服務器端，我們會在下次渲染頁面時隱藏該對話框，而且我們還會將javascript函數綁定到鏈接的onclick上javascript啓用它會立即隱藏對話框。

您對此有何看法？你會如何設計一個網站來支持兩者？

來源

2009-08-16 EBAG

只有項目需要時才重要。對於許多複雜的項目，支持無腳本環境不是一種選擇，因爲它將使開發/質量控制時間和必要的預算增加一倍以上。 – 2009-08-16 19:31:43

同意了，有趣的是，沒有javascript，stackoverflow不起作用！我無法接受答案或沒有答案就添加評論。 – EBAG 2009-08-17 09:42:00

的一種方法是：

首先，創建該網站，沒有任何JavaScript
然後，當每一個作品，添加JavaScript增強地方適合

這樣，如果JS被禁用，網站的「第一」版本仍然有效。

您可以利用CSS完全相同，自然 - 甚至有一個「CSS Naked Day」每一天，顯示的網站看起來沒有什麼CSS ^^

一個例子？

你有一個標準的HTML表單，該數據發佈到你的服務器時提交，並通過服務器頁面的再創造會顯示這樣的消息「感謝subscriving」
然後添加一些JS + Ajax的東西：不是在提交表單時重新加載整個頁面，而是執行Ajax請求，只發送數據;作爲回報，它顯示「謝謝訂閱」而無需重新加載頁面

在這種情況下，如果JavaScript被禁用，第一個「標準」方式仍然有效。

這是（部分）所謂Progressive enhancement

來源

2009-08-16 18:01:33

真正的訣竅在於，如果您受到各方的壓力，需要使用瘋狂的新功能來快速更新網站，則可以保持漸進式增強功能。堅持你的槍支。這是前進的方向。 – 2009-08-16 20:22:50

真的......可悲的是：（（好吧，壓力和難以保持漸進增強的部分） – 2009-08-16 20:24:44

通常的方法是所謂的progressive enhancement。

基本上你採取一個簡單的HTML網站，與常規形式。
下一個增強是CSS - 你看起來不錯。
然後，您可以使用Javascript進一步增強它 - 您可以添加或刪除元素，添加效果等。

基本的HTML總是存在於舊的瀏覽器（例如那些帶有腳本攔截器的瀏覽器）。

例如一個表來發表評論可能是這樣的：

<form action="post-comment.php" method="post" id="myForm"> 
<input type="text" name="comment"> 
</form>

然後你就可以用JavaScript增強它，使其AJAXy

$('#myForm').submit(...);

理想的AJAX回調應該使用相同的代碼爲post-comment.php - 通過調用相同的文件或通過include，然後您不必重複代碼。對付這種

來源

2009-08-16 18:00:28 Greg

該死的，你比我快了^^（但我寫了更多:-p）不錯的作品！ – 2009-08-16 18:02:09

你的目標是什麼的是progressive enhancement。我會先設計沒有JavaScript的網站，然後開始設計網站，一旦它開始工作，就開始通過jQuery等庫來添加JavaScript事件，以便網站的行爲與演示完全分離。通過這種方式，您可以爲那些在瀏覽器中啓用了JavaScript並且沒有啓用JavaScript的用戶提供更高級別的功能和優化。

來源

2009-08-16 18:01:52 Eifion

最好的方法是設計一個沒有JS的工作正常的頁面。然後，在<體>部分的底部與代碼添加一個<腳本>塊這樣的：

window.onload = function() { 
    // Do DOM manipulations to add JS functionality here. For instance... 
    document.getElementById('someInputField').onchange = function() { 
     // Do stuff here that you can't do in HTML, like on-the-fly validation 
    } 
}

研究的jQuery例子。他們展示了很多像這樣的東西。這被稱爲「不顯眼的JavaScript」。谷歌爲了尋找更多的例子。

編輯：上面的jQuery的版本是：

$(document).ready(function() { 
    // Do DOM manipulations to add JS functionality here. For instance... 
    $('#someInputField').change(function() { 
     // Do stuff here that you can't do in HTML, like on-the-fly validation 
    }); 
});

我說這只是爲了顯示jQuery的，相對於標準DOM操作的下冗長。 window.onload和document.ready之間有一點點區別，在jQuery文檔和教程中討論。

來源

2009-08-16 18:02:22

使用漸進增強，研究jquery來了解它。這需要一段時間，直到你頭腦發熱。例如你的想法：

在網頁檢測的JavaScript，如果它未啓用重定向到網站的另一個版本，做沒有javascript代碼，並與純HTML工作

怎麼會你檢測javascript是否被禁用？不是與JavaScript，明顯...

你想錯了方向：最基本的版本必須是默認版本，然後，如果你檢測到更高級的功能，你可以使用它們。

儘可能避免爲不同的bowsers /能力分開版本。保持所有版本同步並且保持最新狀態是非常重要的。

一些好的ressources讓你開始：

來源

2009-08-16 18:13:18 bjelli

而言，這不是重要的是要與JavaScript的網站工作的殘疾人。禁用JavaScript的用戶是那些想要將錯誤隱藏到網站中的人，他們不應該正確導航它。不要浪費你的努力。大家都知道沒有JavaScript就沒有網站。

您唯一需要注意的就是您的表單：永遠不要信任JavaScript中的過濾器，請始終在服務器端重新過濾它，始終！

來源

2009-08-16 18:13:56 Havenard

爲javascript腳本支持和不支持而設計的網站

回答

相關問題