设计一个既支持javascript脚本又不支持javascript脚本的网站

好的，我知道你的网站在禁用javascript的情况下正常工作是很重要的

在我看来，开始考虑如何设计此类网站的一种方法是在主页上检测javascript，如果未启用，则重定向到另一个版本的网站，该版本不使用javascript代码，并且使用纯html（如gmail）

我想到的另一种方法是，例如，想象一下网页对话框上的X（关闭按钮）。如果在没有任何javascript干扰的情况下按X键会导致向服务器发送请求，那么在服务器端，我们下次呈现页面时会隐藏该对话框，并且我们会将javascript函数绑定到链接的onclick，如果启用了javascript，它会立即隐藏该对话框

---

你觉得这个怎么样？您将如何设计一个同时支持这两种功能的网站？

通常的方法是所谓的

基本上，您可以使用一个简单的HTML网站，带有常规表单。
下一个增强是CSS—您可以使它看起来很好。
然后，您可以使用Javascript进一步增强它—您可以添加或删除元素，添加效果等等

对于旧的浏览器（例如那些使用脚本阻止程序的浏览器），基本的HTML总是存在的

例如，发布评论的表单可能如下所示：

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

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

---

理想情况下，AJAX回调应该使用与post-comment.php相同的代码-通过调用相同的文件或通过

include

，那么您就不必重复代码。

处理此问题的一种方法是：

• 首先，创建站点，不使用任何javascript
• 然后，当每种方法都起作用时，在适当的地方添加javascript增强

这样，如果禁用JS，该站点的“第一个”版本仍然可以工作

当然，你也可以用CSS做同样的事情——每天甚至有一个“”来显示没有CSS的网站是什么样子^^

举个例子

• 您有一个标准的HTML表单，在提交时将数据发布到服务器，服务器重新创建页面时会显示类似“感谢订阅”的消息
• 然后添加一些JS+Ajax内容：在提交表单时，您不需要重新加载整个页面，而是执行Ajax请求，只发送数据；作为回报，它会显示“感谢订阅”，而无需重新加载页面

在这种情况下，如果禁用javascript，第一种“标准”方式仍然有效

---

这就是所谓的你的目标。首先，我会在不使用JavaScript的情况下设计站点，一旦成功，就开始通过jQuery之类的库添加JavaScript事件，这样站点的行为就完全独立于表示了。通过这种方式，您可以为浏览器中启用JavaScript的用户和未启用JavaScript的用户提供更高级别的功能和改进

最好的方法是设计一个没有JS的页面。然后在部分底部添加一个块，代码如下：

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

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

研究这些例子。他们展示了很多这样的东西。这被称为“不引人注目的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操作相比，其详细程度更低。jQuery文档和教程中讨论了window.onload和document.ready之间的细微差别。

使用渐进式增强，学习理解它。你需要一段时间才能清醒过来。例如，您的想法：

在主页上检测javascript 如果未启用，则重定向到 另一个版本的网站，这样做 不是javascript代码，可以与 纯html

如何检测javascript是否已禁用？显然，不使用javascript

您的想法是错误的：最基本的版本必须是默认版本，然后，如果您检测到更高级的功能，您可以使用它们

尽量避免针对不同的Bowser/功能使用不同的版本。保持所有版本的同步和更新需要做很多工作

一些好的资源可以帮助您开始：

---

就术语而言，让您的站点在禁用JavaScript的情况下工作并不重要。禁用JavaScript的人是那些想在你的网站上破解bug的人，他们不配正确导航。不要把你的努力浪费在他们身上。每个人都知道，没有JavaScript，网络是不完美的

---

唯一需要注意的是表单：永远不要信任JavaScript中的过滤器，总是在服务器端再次过滤，永远

该死，你比我快^^（但我写得更多：-p）干得好！只有在项目需要时才重要。对于许多复杂的项目，支持noscript环境不是一个选项，因为它将使开发/QA时间和必要的预算增加一倍以上。同意，有趣的是，没有javascript stackoverflow就无法工作！如果没有它，我无法接受答案或添加评论。真正的诀窍是，当来自各方的压力迫使你用疯狂的新功能快速更新网站时，保持这种渐进式的增强。坚持己见。这是前进的方向。这是真的。。。可悲的是：（（好吧，压力和难以维持的渐进性增强部分）