Question

在这里幽默我。

为什么我会在我的网页中使用<noscript>？替代方案（至少我使用的那个）是 Modernizr + no-js class 组合与（例如）HTML 5 Boilerplate一起使用，到目前为止，这已经足够用于所有用例。

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

下面有很多明显的答案。

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

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

所以问题背后的想法更多的是，<noscript>能为Web开发人员做些什么吗？也就是说，它足够重要，但除此之外别无他法呢？

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

Answer 1

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

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

Answer 2

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

Answer 3

如果你有一个包含重要JS的页面，请使用noscript让你的用户知道他们的JS被禁用，他们需要启用它来查看页面。

Answer 4

如果禁用浏览器的JavaScript，则使用

标签。仅当您的浏览器JavaScript未启用时，才会显示内部内容。

您可以将其用于警告消息，例如：“您的JavaScript已禁用。”

Answer 5

我可以为noscript考虑的最佳用例是当您尝试使用javascript延迟加载资源以获得页面性能时。考虑一个简单的图像lazy-loader：

<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后备仍将加载图像。

我为什么要使用<noscript>？</noscript>

下面有很多明显的答案。

5 个答案: