设计一个网站两个JavaScript的脚本支持和不支持(Designing a website fo

好吧，我知道这是重要的，你的网站时禁用了javascript做工精细。

在我开始思考如何设计这样的网站认为一个方法是在网页上检测到的JavaScript，如果它未启用重定向到网站的另一个版本，不支持javascript代码，并用纯HTML的作品（如Gmail）

我心目中的另一种方法是，例如认为在网页上的对话框中的X（关闭按钮）的。如果按下X没有任何JavaScript的干扰导致发送请求到服务器，在服务器端，我们隐藏对话框下一次我们渲染页面，而且我们的JavaScript函数绑定到链接的onclick和的情况下，在启用JavaScript它会立即隐藏对话框。

你觉得这怎么样？你会如何设计一个网站来支持？

Answer 1:

要解决这个问题的方法之一是：

首先，创建该网站，没有任何JavaScript
然后，当每一个作品，添加JavaScript增强地方适合

这样，如果JS被禁用，该网站的“第一”的版本仍然有效。

你可以利用CSS的完全一样，自然-甚至有一个“ CSS裸体日 ”每一天，显示的网站是什么样子没有CSS ^^

一个例子？

你有一个标准的HTML表单，该数据发布到你的服务器时提交，服务器的页面的再创造会显示一条消息，如“感谢subscriving”
然后，您可以添加一些JS + Ajax的东西：不是重新加载整个页面提交表格时，你做一个Ajax请求，只发送数据; 并且，作为回报，它会显示无需重新加载页面“感谢订阅”

在这种情况下，如果JavaScript被禁用，做事情的第一个“标准”的方式仍然有效。

这是（部分）所谓渐进增强

Answer 2:

通常的方法是所谓渐进增强。

基本上你举一个简单的HTML网站，定期的形式。
接下来的增强是CSS - 你做做样子。
然后，你可以用JavaScript进一步提高它 - 你可以添加或删除元素，添加效果等等。

基本的HTML是永远存在的旧的浏览器（或那些脚本阻滞剂，例如）。

例如，要发表评论形式可能是这样的：

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

然后，你可以用JavaScript来使其AJAXy提高它

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

理想情况下，AJAX回调应该-comment.php后使用相同的代码-无论是通过调用同一文件或通过include ，那么你就不必重复代码。

Answer 3:

在方面，它并不重要，使用JavaScript您的网站工作的残疾人。谁禁用JavaScript的人都是谁想破解漏洞进入您的网站的人，他们不应该正确定位它。不要浪费你与他们的努力。大家都知道网络是unsurfable没有JavaScript。

你必须要小心的唯一事情是你的形式：永远不要相信在JavaScript中的过滤器，始终在服务器端再次过滤它，永远幸福！

Answer 4:

使用渐进增强，学习jQuery的去了解它。这需要一些时间，直到你得到你的头周围。例如你的想法：

在网页检测JavaScript和如果它不启用重定向到网站的另一个版本，不支持javascript代码，并用纯HTML工作

你将如何检测如果禁用JavaScript？不使用JavaScript，obivously ...

你想圆了错误的方式：最基础的版本必须是默认版本，然后，如果检测到更高级的功能，你可以使用它们。

尽量避免对不同的bowsers /能力的不同版本，只要你能。这是这么多的工作，以保持所有版本同步和及时做更新。

让你开始有一些很好的ressources：

了解渐进增强
渐进增强用JavaScript
测试驱动的渐进增强

Answer 5:

最好的办法是设计充分作品，未经JS的页面。然后，在<BODY>的底部添加<SCRIPT>块与这样的代码段：

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的文档和教程讨论。