Question

我想知道是否有人优化他们的网页，以便在用户禁用Javascript时有一些友好的行为。在这种情况下是否有任何技巧可以提供一些伪脚本行为？我说的是在新窗口中打开链接等基本内容。我想如果没有Javascript，你仍然可以做很多事情。在某些情况下，有一个页面具有一些可以依赖的功能，这可能很方便。有没有做法？

编辑：到目前为止答案很好！人们是否会介意包含一些示例代码（来吧，HTML太容易了！）因为我认为我还没有在SO上看过这样的问题。

Answer 1

我有时会做的是设置需要Javascript才能显示的功能，然后使用Javascript来显示它们。这样，没有Javascript的人就看不到他们无法使用的功能。然后在<noscript>标记中添加替代功能。

Answer 2

要在新窗口中打开链接，您可以使用target =“_ blank”

<a href="http://www.google.com" target="_blank">Google</a>

在我工作的地方，我们使用着陆页确保（在某种程度上）他们在进入应用程序之前启用了Javascript ...

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Please Wait...</title>
  </head>
  <body>
    <h1>Please Wait....</h1>
    <noscript><h1>You need a JavaScript-enabled browser to use this application!</h1></noscript>
    <script type="text/javascript">
      <!--
        location.href = "FrontPage.aspx";
      // -->
    </script>
  </body>
</html>

另外，我常常对how powerful CSS can be感到惊讶。

Answer 3

Stackoverflow以一种很好的方式处理这个问题。该网站完全可以在没有Javascript的情况下使用，可以提出问题并回答它们。投票等高级功能不起作用。

您必须在愿意花费的时间在没有Javascript的情况下使网站可用以及必须运行的功能数量之间找到折衷方案。

Answer 4

你可以使用＆lt; NOSCRIPT＆GT;标签创建超链接，目标是_blank以打开新窗口。

它对搜索引擎优化也有好处，所以像谷歌和雅虎这样的搜索引擎！可以识别并抓取您网页中的链接。

＆LT; NOSCRIPT＆GT;也可以为那些禁用js的浏览器提供正常的功能。

Answer 5

当您使用Javascript从链接打开窗口时，您可以使其透明，以便在禁用Javascript时它将回退到链接的原始行为：

<a href="http://www.guffa.com" target="_blank" onclick="window.open(this.href,this.target,'width=900,height=700');return false;">Guffa</a>

如果启用了Javascript，则onclick事件将捕获单击并打开一个窗口，然后它从事件中返回false，以便不遵循该链接。如果禁用Jasvascript，则会关注链接。

Answer 6

“我想如果没有Javascript，你仍然可以做很多事情” - 很有趣，不久前我们没有使用javascript来做一切。

最好的方法是所谓的“渐进增强”。原则是制作一些没有JavaScript的东西，然后通过将JavaScript绑定到对象来“分层”其他行为。像jQuery这样的库让这很简单，因为它们支持CSS样式的选择器。这样你就可以像应用CSS一样应用JS行为了（好吧，有点夸张）。

需要考虑一些思考什么是良好的基线以及如何更改页面。

通常真正的额外工作是在服务器端，您可能需要有多个请求处理系统。在一个小小的响应中，这是一个很大的领域！

此外，值得思考用户不使用javascript的原因和原因。 Here's something I wrote a while ago on the subject你应该感兴趣吗？

一个例子？采取简单的方法，例如。当用户将鼠标移动到表单字段时，您希望通过表单字段显示漂亮的“工具提示”。在HTML中，这些可以（例如）标记为段落：

<label for="username">User name</label><input type="text" id="username" />
<p>Username must be between 6-8 characters</p>

对于非JS用户，提示可以简单地显示为一个很好的段落。所以你用CSS来设计它。为JS用户提供额外的CSS，默认情况下会隐藏该段落。所以：2套CSS，一套覆盖另一套。

非JS：

form p {
    margin: 10px 0 0 0;
    border-bottom: 1px solid grey;
}

JS：

form p {
    position: absolute; display: none;
    width: 180px;
    background-image: url(nice-bubble.gif);
    padding: 10px;
}

如何为JS /非JS情况应用CSS取决于您。有很多选择。我个人喜欢在CSS中编写JS代码，并在标记中使用noscript.css变体（即向后工作）。哪个不是有效的XHTML，但效果很好。

然后，让一些JS查找元素并管理工具提示的显示代码。例如：

$(document).ready(function() {
    $('form input').focus(function() {...display paragraph...});
    // etc;
})

那是伪造的代码，但是你得到了照片。你最终得到的是一套HTML，有2个演示文稿和其他行为，而且你自己的HTML本身也没有混乱。

Answer 7

禁用Javascript的人可能还会修改CSS，Java和其他“演示”功能，以节省低功耗浏览器的处理能力。（例如，网络电话或旧型号计算机。）您可以通过向服务器添加简单功能来缓解这种情况，就像他们在CGI（random intro here）时代所做的那样。在这种情况下，您的服务器可以将非JS用户重定向到GET / POST页面版本。我也会尽可能简单明了地回答，因为你可能输出一个小屏幕。

Answer 8

Here's a question（and another）对构建优雅处理禁用JavaScript的网站有很多（不同的）意见。

Answer 9

jQuery确实有帮助。很多时候使用大型JavaScript插件（标签，工具提示等等），你都会以非常语义的方式编写标记。

实施例：标签插件要求您创建锚定的div，即

<a href="#Preferences">Preferences</a>
<a href="#Tools">Tools</a>
<div id="Preferences">
   blah
</div>
<div id="Tools">
   bar
</div>

这在语义上是有意义的，如果没有选项卡插件，您将获得一些功能。但是，当你启用javascript和jquery-tabs时，你会得到一个非常好的，丰富的界面。

正如其他一些人所指出的那样，这实际上只是渐进式增强。编写语义标记，用CSS增强它，然后用Javascript增强它。你应该得到一些适合所有人的东西，甚至是lynx用户。

Javascript禁用最佳做法？

9 个答案: