【问题标题】：Making My Site Noscript-compatible使我的网站 Noscript 兼容
【发布时间】：2011-02-08 01:46:05
【问题描述】：

我几乎已经从头开始为自己建立了一个铭牌网站，既可以作为学习经验，也可以正式将我的存在放到网上。我制作了一个看起来很酷（至少，我认为是这样）的选项卡式网站，它使用 AJAX 和锚导航在选项卡之间切换。我还整理了一个样式更改脚本，它使用 cookie 来记住您的样式选择。

现在，64000 美元的问题：我如何使这个网站可供选择关闭 JavaScript 的人使用？就目前而言，没有脚本的用户只能看到“关于我”部分，而没有其他内容。我还在顶部放置了一个横幅，将他们引导到我的“noscript”页面，该页面目前不存在。最好的选择是一次显示所有内容的 noscript 页面吗？是否有 CSS 方法来避免 JavaScript 进行标签切换？或者，是否有某种方法可以在不编写脚本的情况下向用户显示主页上的所有内容，但仍然为其他人提供脚本增强版本？

我的网站位于scolbyme.webs.com。我很感激你们提出的任何想法！

附：能说出背景颜色的人的奖励积分。

【问题讨论】：

对我来说似乎更像是一个 5 美元的问题。 :) 从实际的角度来看，不运行脚本的人很少值得为他们设计。不过，我并不是在质疑您的技术问题的有效性，而且这个项目将是一个学习渐进增强的好项目。
我不得不完全不同意 quixoto —— 残疾人和盲人值得为他们设计，而且他们通常没有 javascript；它甚至不是启用/禁用它的选择。在我的工作中，强制（根据法律）必须符合 508，这意味着没有 JavaScript 必须工作。

标签： javascript css html noscript

【解决方案1】：

如果您担心关闭脚本的人，您使用了错误的设计程序；您应该创建一个无需脚本即可运行的网站，并稍后添加 ajax / 脚本增强功能。

现在更改它会非常困难，但也许您可以将所有选项卡设为常规链接并制作某种模板，以显示正确的布局并阅读所选选项卡的特定内容。

【讨论】：

【解决方案2】：

我同意 jeroen 的观点，你想先正常构建网站（不带 ajax），然后添加 js 层。

如果您将每个选项卡构建为自己的页面，并将页面的内容放入具有特定 id 的 div 中，您可以很容易地使用 jquery 进行 ajax 调用，该调用可以从页面中抓取内容并且只抓取在包含内容的 div 中，然后将其放入您的主页。所以，同样的效果，但该网站也可以完全不使用脚本。

【讨论】：

【解决方案3】：

1 - 用这个替换你的导航：

<noscript>
    <nav>
        <div id="twitternav"><a href="?r=twitter">Twitter</a></div>
        <div id="tumblrnav"><a href="?r=tumblr">Tumblr</a></div>
        <div id="flickrnav"><a href="?r=flickr">Flickr</a></div>
        <div id="facebooknav"><a href="?r=facebook">Facebook</a></div>
        <div id="devnav"><a href="?r=dev">Dev</a></div>
        <div class="active" id="aboutnav"><a href="?r=about">About Me</a></div>
    </nav>
</noscript>
<div id="nav_with_script"></div>

当设备是手机或不支持 JavaScript 时，noscript 会显示替代菜单，您的链接将是 ?r=twitter 而不是 #twitter。最后一个 div 是带有 javascript 的菜单的容器。您通过推送此代码内部头部标签来填充它：

<script type="text/javascript">
document.getElementById('nav_with_script').innerHTML = '<nav><div id="twitternav"><a href="#twitter">Twitter</a></div><div id="tumblrnav"><a href="#tumblr">Tumblr</a></div><div id="flickrnav"><a href="#flickr">Flickr</a></div><div id="facebooknav"><a href="#facebook">Facebook</a></div><div id="devnav"><a href="#dev">Dev</a></div><div class="active" id="aboutnav"><a href="#about">About Me</a></div></nav>';
</script>

如果设备不支持 javascript，则 noscript 将显示且不执行。如果设备支持 javascript，则显示菜单内部 nav_with_script div。

2 - 更改您的页面以根据 $_GET['r']

显示内容

类似这样的：

<div id="twitter"<?php if($_GET['r'] == 'twitter') { echo ' class="active"'}?>></div>
<div id="thumblr"<?php if($_GET['r'] == 'thumblr') { echo ' class="active"'}?>></div>
...

而且它可以在旧设备中访问。这是一个补救解决方案，从项目开始就制作了良好的不引人注目的代码。

【讨论】：