为javascript脚本支持和不支持而设计的网站

问题描述：

好的我知道，禁用JavaScript可以让您的网站正常工作，这一点很重要。为javascript脚本支持和不支持而设计的网站

在我看来，开始思考如何设计这样的网站的一种方法是在主页上检测JavaScript，如果它没有启用重定向到另一个版本的网站，不JavaScript代码和纯HTML工作（如Gmail）

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

您对此有何看法？你会如何设计一个网站来支持两者？

只有项目需要时才重要。对于许多复杂的项目，支持无脚本环境不是一种选择，因为它将使开发/质量控制时间和必要的预算增加一倍以上。 – 2009-08-16 19:31:43

同意了，有趣的是，没有javascript，*不起作用！我无法接受答案或没有答案就添加评论。 – 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 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，然后您不必重复代码。对付这种

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

答

你的目标是什么的是progressive enhancement。我会先设计没有JavaScript的网站，然后开始设计网站，一旦它开始工作，就开始通过jQuery等库来添加JavaScript事件，以便网站的行为与演示完全分离。通过这种方式，您可以为那些在浏览器中启用了JavaScript并且没有启用JavaScript的用户提供更高级别的功能和优化。

答

最好的方法是设计一个没有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文档和教程中讨论。

答

使用渐进增强，研究jquery来了解它。这需要一段时间，直到你头脑发热。例如你的想法：

在网页检测的JavaScript，如果它未启用重定向到网站的另一个版本，做没有javascript代码，并与纯HTML工作

怎么会你检测javascript是否被禁用？不是与JavaScript，明显...

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

尽可能避免为不同的bowsers /能力分开版本。保持所有版本同步并且保持最新状态是非常重要的。

一些好的ressources让你开始：

Understanding Progressive Enhancement
Progressive Enhancement with JavaScript
Test-Driven Progressive Enhancement

答

而言，这不是重要的是要与JavaScript的网站工作的残疾人。禁用JavaScript的用户是那些想要将错误隐藏到网站中的人，他们不应该正确导航它。不要浪费你的努力。大家都知道没有JavaScript就没有网站。

您唯一需要注意的就是您的表单：永远不要信任JavaScript中的过滤器，请始终在服务器端重新过滤它，始终！

为javascript脚本支持和不支持而设计的网站

相关推荐