2

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

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

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

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

4

6 回答 6

12

解决此问题的一种方法是：

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

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

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


一个例子？

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

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

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

于 2009-08-16T18:01:33.357 回答
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 回调应该使用与 post-comment.php 相同的代码 - 通过调用相同的文件或 via include，那么您不必复制代码。

于 2009-08-16T18:00:28.477 回答
2

最好的方法是设计一个无需 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 文档和教程中进行了讨论。

于 2009-08-16T18:02:22.323 回答
2

使用Progressive Enhancement，学习jquery来理解它。你需要一些时间才能理解它。例如你的想法：

在主页检测 javascript，如果未启用，则重定向到另一个没有 javascript 代码并使用纯 html 的网站版本

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

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

尽量避免为不同的弓箭手/功能使用单独的版本。使所有版本保持同步和最新是一项艰巨的工作。

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

于 2009-08-16T18:13:18.290 回答
2

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

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

于 2009-08-16T18:13:56.273 回答
1

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

于 2009-08-16T18:01:52.980 回答