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

发布于 2024-08-01 12:58:05 字数 371 浏览 11 评论 0原文

好吧，我知道在禁用 JavaScript 的情况下，您的网站能够正常工作非常重要。

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

辞别 2024-08-08 12:58:05

您的目标是渐进增强。为此，我首先设计不使用 JavaScript 的网站，一旦可以运行，就开始通过 jQuery 等库添加 JavaScript 事件，以便网站的行为与演示完全分开。通过这种方式，您可以为那些在浏览器中启用了 JavaScript 的人和没有启用 JavaScript 的人提供更高级别的功能和完善。

回复收藏 0 原文

等你爱我 2024-08-08 12:58:05

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

The best way is to design a page that works adequately without JS. Then add a <script> block at the bottom of the <body> section with code like this:

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

Study the jQuery examples. They show lots of things like this. This is called "unobtrusive JavaScript". Google for that to find more examples.

EDIT: The jQuery version of the above is:

$(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
   });
});

I added this just to show the lower verbosity of jQuery vs. standard DOM manipulation. There is a minor difference between window.onload and document.ready, discussed in the jQuery docs and tutorials.

回复收藏 0 原文

念三年u 2024-08-08 12:58:05

换句话说，让您的网站在禁用 JavaScript 的情况下运行并不重要。禁用 JavaScript 的人是想侵入你的网站的人，他们不值得正确导航。不要在他们身上浪费你的精力。大家都知道，如果没有 JavaScript，网络就无法冲浪。

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

回复收藏 0 原文

冷月断魂刀 2024-08-08 12:58:05

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

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

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

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

尽可能避免针对不同的弓箭手/功能使用单独的版本。保持所有版本同步和最新需要做很多工作。

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

回复收藏 0 原文

万水千山粽是情ミ 2024-08-08 12:58:05

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

基本上，您需要一个简单的 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，那么你就不必重复代码。

The usual method is what's called progressive enhancement.

Basically you take a simple HTML website, with regular forms.
The next enhancement is CSS - you make it look good.
Then you can enhance it further with Javascript - you can add or remove elements, add effects and so on.

The basic HTML is always there for old browsers (or those with script blockers, for example).

For example a form to post a comment might look like this:

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

Then you can enhance it with javascript to make it AJAXy

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

Ideally the AJAX callback should use the same code as post-comment.php - either by calling the same file or via include, then you don't have to duplicate code.

回复收藏 0 原文