为什么我应该使用<noscript>

Why should I use <noscript>?

本文关键字：noscript gt 我应该 lt 为什么      更新时间：2023-09-26

在这里幽默一下。

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

我能想到使用<noscript>的唯一原因是在JS未启用时有条件地加载资源文件（很可能是CSS覆盖？）。我不确定是否有一种方法可以在不使用<noscript>的情况下实现JS免费，但即使是这种用例似乎也可以绕过它。

下面有很多显而易见的答案

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

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

因此，这个问题背后的想法更多的是，<noscript>能为web开发人员做些什么吗？也就是说，这已经足够重要了，但没有其他方法可以做到这一点吗？

@下面的古法用广告表达了一个很好的观点。

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

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

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

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

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

标记用于浏览器的JavaScript被禁用的情况。只有当您的浏览器JavaScript未启用时，才会显示里面的内容。

您可以将其用于警告消息，例如："嘿，您的JavaScript被禁用了。"。"

我能想到的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类隐藏延迟加载的图像，则无js回退仍将加载该图像。

相关文章：