为什么我应该使用 <noscript>？答案

【问题标题】：Why should I use <noscript>?为什么我应该使用 <noscript>？
【发布时间】：2012-03-13 05:39:40
【问题描述】：

在这里给我幽默一点。

我为什么要在我的页面中使用 <noscript>？ 另一种选择（至少是我使用的那个）是 Modernizr + no-js 类组合，即与（例如）HTML 5 Boilerplate 一起使用，到目前为止，这在所有用例中都足够了。

我能想到使用<noscript> 的唯一原因是在未启用 JS 时有条件地加载资源文件（很可能，CSS 覆盖？）。我不确定是否有办法在不使用<noscript> 的情况下做到这一点，但即使是那个用例似乎也可以解决。

下面有很多明显的答案。

是的，<noscript> 用于在 Javascript 不可用时有条件地向客户端显示/隐藏 HTML 元素。我知道。你懂的。使用 HTML 的每个人都应该知道这一点。

但是，还有很多其他方法可以做同样的事情，其中大多数比<noscript> 更受欢迎。一个是我上面提到的 Modernizr 切换的html.no-js 类。

所以问题背后的想法更多的是，<noscript> 可以为 Web 开发人员做些什么独特的事情吗？也就是说，它足够重要，但没有其他方法可以做到吗？

下面的@Guffa 对广告提出了一个很好的观点。

【问题讨论】：

所以你可以去<noscript>alert('You MUST enable javascript!')</noscript>
@Madmartigan ~ 哦是的ssssssssss。我忘记了！ :D
其实我还以为是垃圾关键词：<noscript>Best online deals free World of Warcraft Harry Potter XBOX Live eBay...</noscript>

标签： javascript html noscript

【解决方案1】：

好吧，你为什么要这样做？如果你没有用它，那就不要使用它。

noscript 标签通常用于广告和访问者跟踪中的后备。如果用户禁用了 Javascript，则会加载纯图像而不是运行脚本。

【讨论】：

不，这更像是一个我只是好奇并且我想覆盖所有我的基地™的问题。

【解决方案2】：

当用户的浏览器不支持javascript或禁用Javascript时。将显示的元素。

【讨论】：

【解决方案3】：

如果我没记错的话，确定将其包含在 HTML5 中（而不是被归类为过时）的关键用例之一是它可以与 <meta http-equiv="refresh" ... 一起使用，这样如果 JS 不可用用户会自动重定向到网站的非 JS 版本。

【讨论】：

【解决方案4】：

如果您的页面中包含关键 JS，请使用noscript 让您的用户知道他们的 JS 已被禁用，他们需要启用它才能查看该页面。

【讨论】：

您实际上可以在 Stack Overflow 上看到这一点，有一个红色警告横幅。

【解决方案5】：

标签用于浏览器 JavaScript 被禁用的情况。仅当您的浏览器 JavaScript 未启用时，才会显示其中的内容。

您可以将其用于警告消息，例如：'Hye your JavaScript is disabled."

【讨论】：

但是您可以使用 Modernizr + no-js 组合来做到这一点。 Modernizr 将 html.no-js 更改为 html.js（以及其他），因此您可以使用 CSS 来定位它。即<div id="warning">Your JS is disabled.</div> 和html.js #warning { display:none; }。
它与 CSS 或 Modernizer 或任何其他 JavaScript 库无关。假设我有一个主要依赖于 JavaScript 的 Web 应用程序。因此，在这种情况下，只要用户打开网站并禁用 JavaScript，我就可以显示一个弹出窗口。说启用你的 JavaScript。用户在未启用 JavaScript 之前无法访问您的网站。
Modernizer 不是内置的 HTML API。我们只在需要时才包含它。没有必要将它包含在所有项目中。即使不使用 CSS，HTML 也允许您使用

【解决方案6】：

对于 noscript，我能想到的最佳用例是当您尝试使用 javascript 来延迟加载资源以提高页面性能时。考虑一个简单的图像延迟加载器：

<style>
    .no-js .lazy-load { display:none }
</style>
<img data-src="/path/to/img.jpg" src="/placeholder.png" class="lazy-load">
<noscript>
    <img src="/path/to/img.jpg">
</noscript>
<script>(function ($) {
    // http://stackoverflow.com/a/488073/1459873
    function isScrolledIntoView(elem) {
        var $elem = $(elem);
        var $window = $(window);
        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();
        var elemTop = $elem.offset().top;
        var elemBottom = elemTop + $elem.height();
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
    function lazyLoad() {
        $('img.lazy-load').filter(function () {
            return isScrolledIntoView(this);
        }).each(function () {
            var $this = $(this);
            $this.attr('src', $this.data('src'))
                 .removeClass('lazy-load')
                 .addClass('lazy-loaded');
        });
    }
    $.ready(lazyLoad);
    $(window).on('load scroll resize', lazyLoad);
}(jQuery))</script>

如果您尝试使用 css 类隐藏延迟加载的图像，则 no-js 后备仍然会加载图像。

【讨论】：