为javascript脚本支持和不支持设计一个网站

Posted 2023-03-15

【中文标题】为javascript脚本支持和不支持设计一个网站

【英文标题】：Designing a website for both javascript script support and not support

【发布时间】：2010-11-20 01:43:13

【问题描述】：

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

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

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

你怎么看这个？您将如何设计一个网站来支持两者？

【问题讨论】：

只有在项目需要时才重要。对于许多复杂的项目，支持 noscript 环境不是一种选择，因为它会使开发/QA 时间和必要的预算增加一倍以上。

同意，有趣的是，没有 javascript，*** 就无法工作！没有答案，我无法接受答案或添加评论。

【参考方案1】：

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

首先，创建站点，无需任何 javascript 然后，当一切正常时，在合适的地方添加 javascript 增强功能

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

你可以用 CSS 做同样的事情，自然 - 甚至每天都有一个“CSS Naked Day”，显示没有 CSS 的网站是什么样子的 ^^

一个例子？

您有一个标准的 HTML 表单，提交时会将数据 POST 到您的服务器，并且服务器重新创建页面会显示一条消息，例如“感谢订阅” 然后添加一些 JS + Ajax 的东西：在提交表单时不是重新加载整个页面，而是执行 Ajax 请求，它只发送数据；作为回报，它会在不重新加载页面的情况下显示“感谢订阅”

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

这是（部分）所谓的Progressive enhancement

【讨论】：

真正的诀窍是在您受到来自各方的压力以使用疯狂的新功能快速更新网站时保持这种渐进式增强。坚持你的枪。这是前进的方向。

如此真实......可悲的是:-(（嗯，压力和难以维持渐进增强部分）

【参考方案2】：

通常的方法是所谓的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）干得好！

【参考方案3】：

也就是说，让您的网站在禁用 JavaScript 的情况下工作并不重要。禁用 JavaScript 的人是想将错误侵入您的网站的人，他们不值得正确导航。不要在他们身上浪费你的努力。每个人都知道没有 JavaScript 就无法上网。

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

【参考方案4】：

使用渐进增强，研究jquery 了解它。你需要一些时间才能理解它。比如你的想法：

在主页检测 javascript 如果未启用重定向到 另一个版本的网站 不是 javascript 代码并且可以使用 纯html

您将如何检测 JavaScript 是否被禁用？显然不是用 javascript...

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

尽可能避免针对不同的弓箭手/功能使用不同的版本。让所有版本保持同步和最新状态是一项艰巨的工作。

一些很好的资源可以帮助您入门：

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

【参考方案5】：

最好的方法是设计一个无需 JS 也能正常工作的页面。然后在

部分的底部添加一个

【参考方案6】：

您的目标是progressive enhancement。我将首先设计没有 JavaScript 的网站，一旦它工作，开始通过 jQuery 之类的库添加您的 JavaScript 事件，以便网站的行为与演示完全分离。通过这种方式，您可以为浏览器中启用了 JavaScript 和未启用 JavaScript 的用户提供更高级别的功能和改进。