我们不应该使用 <noscript> 元素吗？答案

【问题标题】：Shouldn't we use <noscript> element?我们不应该使用 <noscript> 元素吗？
【发布时间】：2011-01-11 08:17:56
【问题描述】：

我在这里发现了一些好的缺点：

noscript 元素仅检测浏览器是否启用了 JavaScript。如果在防火墙中而不是在浏览器中禁用了 JavaScript，则 JavaScript 将不会运行，并且不会显示 noscript 元素的内容。
许多脚本依赖于所支持语言的一个或多个特定功能才能运行（例如 document.getElementById）。在不支持所需功能的情况下，JavaScript 无法运行，但由于支持 JavaScript 本身，因此不会显示 noscript 内容。
使用 noscript 元素最有用的地方是在页面的头部，它可以选择性地确定在页面加载时将哪些样式表和元元素应用于页面，而不必等待直到页面加载完毕。不幸的是，noscript 元素仅在页面正文中有效，因此不能在头部使用。
noscript 元素是块级元素，因此只能在禁用 JavaScript 时用于显示整个内容块。它不能内联使用。
理想情况下，网页应该使用 HTML 作为内容，使用 CSS 作为外观，使用 JavaScript 作为行为。使用 noscript 元素是在 HTML 中应用行为，而不是从 JavaScript 中应用。

来源：http://javascript.about.com/od/reference/a/noscriptnomore.htm

我非常同意最后一点。有没有办法制作和添加外部<noscript> 文件？我们应该将<noscript> 放在<head> 中吗？

【问题讨论】：

是否还有禁用 javascript 的防火墙？大约 13 年前，我落后于一个，即使在那时也很糟糕。我的猜测是，如今这样的政策是不可能的，因为大约三分之一的网络将不再可用
根据最新的规范，
noscript标签可以很好的用在页面的head部分。
正如其他人所提到的，<noscript> 元素在最新规范中的中是允许的。
我必须在有限的时间内为新网站选择要做什么，所以我选择需要 JavaScript，因为有太多的处理似乎不可能只用 HTML 和 CSS 来完成。我希望所有的手机/移动设备都可以运行 JavaScript。

标签： javascript xhtml web-standards noscript

【解决方案1】：

最好将默认设置为非 javascript，然后让 javascript 代码用启用 javascript 的页面覆盖。不必太多。可以只是一个 display:none; 块，然后通过 javascript 将其设置为 display:block;，反之亦然，用于非 js 页面。

【讨论】：

A display:block "您的浏览器似乎不支持 JavaScript" 由 Javascript 设置为 display:none 是 NOSCRIPT 的可行替代方案，但您是丢失语义信息（机器人不知道你在说什么）。
为确保这种方法在启用javascript时不会导致非javascript版本的flash，请参阅stackoverflow.com/questions/3221561/…了解如何避免flash。（在 head 标签中使用 javascript 隐藏 HTML 标签，因为该标签在读取正文之前存在。然后在文档准备好时再次显示。）
你提到更好...。为什么比<noscript>标签好？
如果您在文档准备就绪后通过 JS 将某些内容设置为“显示：无”，您将在打开页面时闪烁。后备元素在几分之一秒内可见。那是痛苦。本机 noscript 标签不会闪烁。否则我不知道如何消除闪烁。
由于脚本而显示 HTML 内容是很危险的。无论脚本依赖如何，都应默认显示原始内容和 HTML。 noscript 作为元素的最初想法是仅在浏览器中禁用脚本时出现。通过反转这个概念，现在有了由显式脚本触发的内容和无脚本，您可以在没有脚本的情况下删除这些元素的本机显示。

【解决方案2】：

我建议你不要使用<noscript>，你可以使用如下代码：

<HTML>
<head>
<script>
     window.location="some-page.php";
</script>
</head>
<body>
<p>
    Please active JavaScript .
</p>
</body>
</HTML>

如果在任何情况下没有启用 JS，则会显示消息，否则用户将被重定向到目标页面。

【讨论】：

我建议你不要使用
我建议你不要使用
修正了格式 - 只需选择代码并按工具栏上的代码按钮（或缩进 4 个空格）。
投反对票。为什么要重新发明标准已经为您提供的东西？

【解决方案3】：

虽然 Tor Valamo 对这个问题有一个优雅的答案，但有一个问题可能会导致您选择不使用此技术。

问题（通常）是 IE。它倾向于加载和执行 JS 比其他浏览器慢一点，导致它有时会在加载 JS 并隐藏 div 之前闪烁“请启用您的 Javascript”div 片刻。

这很烦人，要解决这个问题，您可以实现“经典”。 <noscript>重定向方法。

<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>

这是我遇到的最可靠的技术来解决这个小麻烦。

【讨论】：

只要您重定向到一个仍然以其他方式提供相同功能和信息的页面。否则，这真的很烦人。
请参阅stackoverflow.com/questions/3221561/… 了解如何避免闪光。（在 head 标签中使用 javascript 隐藏 HTML 标签，因为该标签在读取正文之前存在。然后在文档准备好时再次显示。）
我用一个阻止 JS 并且不起作用（无重定向）的 chrome 扩展对此进行了测试，仅从浏览器的设置中禁用 JS 有效。不是最佳解决方案

【解决方案4】：

经过多天的思考和来回更改我的代码，我想我现在有了更清晰的画面，并想在我忘记之前分享我在这个主题上的两分钱。

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

对

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

根据情况分三种情况考虑：

案例 1 - 如果需要的脚本是内联的

JavaScript 已禁用

<noscript> 元素中的内容立即出现，非 js 内容是显示
<div> 元素中的内容立即出现，非 js 内容显示

启用 JavaScript

<noscript> 元素中的内容根本没有出现，显示的是 js 内容
<div> 元素中的内容可能会在隐藏之前暂时出现，js 显示的内容

对于这种情况，使用<noscript> 元素是有利的。

案例 2 - 如果需要的脚本来自外部（第三方）源，但 `<div>` 元素的隐藏是通过内联脚本完成的

JavaScript 已禁用

<noscript> 元素中的内容立即出现，非 js 内容是显示
<div> 元素中的内容立即出现，非 js 内容显示

JavaScript 已启用，但所需的脚本被阻止

<noscript> 元素中的内容根本没有出现，什么也没有显示！
<div> 元素中的内容可能会在被隐藏之前暂时出现，什么都不会显示！

已启用 JavaScript 并收到所需的脚本

<noscript> 元素中的内容根本没有出现，显示的是 js 内容
<div> 元素中的内容可能会在隐藏之前暂时出现，js 显示的内容

对于这种情况，使用<noscript> 元素是有利的。

案例 3 - 如果需要，脚本会隐藏 `<div>` 元素

JavaScript 已禁用

<noscript> 元素中的内容立即出现，非 js 内容是显示
<div> 元素中的内容立即出现，非 js 内容显示

JavaScript 已启用，但所需的脚本被阻止

<noscript> 元素中的内容根本没有出现，什么也没有显示！
出现<div>元素中的内容，显示非js内容

已启用 JavaScript 并收到所需的脚本

<noscript> 元素中的内容根本没有出现，显示的是 js 内容
<div> 元素中的内容可能会在隐藏之前暂时出现，js 显示的内容

对于这种情况，使用<div> 元素是有利的。

总结

如果 HTML 内容的呈现依赖于第三方脚本或者所需的脚本是内联的，则使用 <noscript> 元素。否则，请使用 <div> 元素并确保所需的脚本包含：

document.getElementById('noscript').style.display='none';

【讨论】：

安全人员和 CSP 似乎不喜欢内联脚本元素。显然它们可以用于某种注入攻击。他们希望所有脚本都在单独的文件中，不知道为什么。

【解决方案5】：

我见过的一个有用的 noscript 应用程序是逐步增强的大量内容的异步加载（尤其是“首屏”）。大图像、iframe 等可以在 HTML 源代码中的 noscript 中进行包装，然后在 DOM 准备好后，可以使用 JavaScript 将未包装的元素附加到页面中。这会解除对页面的阻塞，并且可以提供更快的初始加载体验，尤其是如果您的界面依赖于在文档准备好后应用的 JS/JQ 交互（我咨询过的投资组合页面需要 2 秒与 6 秒）。

【讨论】：

【解决方案6】：

我在所有带有一些 id 的页面中创建了一个全高、全宽、位置：固定的 div。

<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){




});

我不是专家。这对我有用。很抱歉，只有当您希望用户始终启用他的 javascript 时，这种情况才适用

【讨论】：

$('#noscript_div').hide();如果 jquery 以某种方式失败，将不会触发

【解决方案7】：

现在似乎几乎每个浏览器都运行 Javascript，但您永远无法知道谁将访问您的网站。如今，甚至 screen readers 和 web crawlers 也使用 Javascript，并且有时会在必要时发出 AJAX 请求。

也就是说，如果您要回退到无 Javascript，有一个比<noscript> 标签更好的方法。只需在文档的HEAD 中执行此操作：

<script type="text/javascript">
    document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>

使用这种技术，您可以轻松地在 CSS 中引用 Q_js 类来隐藏内容。使用<noscript> 标记，您能希望的最好结果就是包含一个额外的CSS 文件来覆盖以前的CSS。当某些具有静态内容的元素应该立即隐藏（而不是闪烁）直到 Javascript 可以使它们更加动态时，这一点变得很重要。

简而言之，我建议的技术解决了你所有的缺点 1-5，我相信它比使用 <noscript> 更好。

【讨论】：

网络爬虫对 JS 的使用仍然受到很大限制。用 JS 隐藏东西会产生眨眼。
只有在你的javascript被加载之后元素才会产生闪烁。这不是隐藏元素，而是在容器中添加一个类，并在中添加 Javascript，该类在任何这些元素之前加载！

【解决方案8】：

简单的想法是，在这个时代，您的网站可能会适应在慢速设备上不使用 javascript，使用 noscript 标签作为您网站全部内容的实体**（您的 html 应该准备好不使用 javascript 和所有如果 javascript 关闭，控件也必须工作，使用基本 html 控件的用户应该能够在 javascript 处于活动状态时完成他们之前所做的一切。所以<noscript></noscript> 可以以其他方式动态切换到相同的内容，结果相同=解决问题是用户打开您的网址的原因）。**您可以看到无论是否存在javascript，网站的功能在任何情况下都可以“相同”js启用/禁用。在中文慢速设备，例如：Samsung neo mini phone 这种方法可以在低互联网流量的情况下运行网站而不会出现任何延迟。如果 js 处于开/关情况，请尝试运行此自动双重功能网站：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
    $('noscript').replaceWith(function() {
        return this.textContent || this.innerText;
    });
    $("p#javascripton").css("background-color", "yellow"); 
    $("p").click(function(){
        $(this).hide();
    });
}); 
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>

并对此进行更多说明.. 对 noscript 的发明是为了在 js 被禁用时像触发器一样工作，但是您可以解决此功能来改变互联网功能的进程，以改变它的动态...... .

【讨论】：

【解决方案9】：

在（希望不久的）将来，您将能够使用css @media scripting：

@media (scripting: none) {
    /* styles for when JS is disabled */
}

【讨论】：

【解决方案10】：

像所有事情一样，为工作使用正确的工具。

如果您使用的是 Google Maps API，则您有一个通过标签的静态图像，并被动态 JS 地图替换。谷歌最近开始对所有东西收费，因此在上面的例子中，它会花费你两次，一次是静态的，一次是动态的。静态地图仅在禁用 JS 时才相关。因此，为了节省双重支付，在我看来，最好的解决方案是将静态地图的标签包装在标签中。

【讨论】：

【解决方案11】：

“noscript”元素在 XML 或 XHTML5 多语言中不受支持，因此 W3C 不推荐。

我也不喜欢这样的想法，即每个页面都以无脚本可查看 div 开始，然后在网站的每个页面上被一些 Javascripted 马戏团技巧隐藏。如果被后来的开发人员更改，可能会失败或造成严重破坏的危险且更多的脚本依赖项。

更好的策略是使用包含所有内部脚本内容的基本 html 设计来设计您的网站，以便用户至少看到带有标题和基本内容出现位置的页面设计。如果它是空的，很明显他们无法查看内容是有原因的。然后，我会在页脚中添加一个小消息或信息图标，如果您没有看到任何内容，您的 javascript 将被禁用。无论他们是否看到脚本内容，都会出现这种情况。此解决方案无需编写脚本。

作为最后的手段，您可以使用每个网页底部的 display:none 让脚本隐藏该消息。

它不像提供替代内容或消息框那样性感，但是对于繁重的 Angular 网站，如果禁用脚本，无论如何您都必须为它们创建一个新的内容页面。此解决方案还考虑了用户代理中不支持脚本与禁用支持的情况，并通过避免 noscript 标记使您的网页 100% 与所有用户代理兼容。

【讨论】：

投反对票。

案例 1 - 如果需要的脚本是内联的

案例 2 - 如果需要的脚本来自外部（第三方）源，但 &lt;div&gt; 元素的隐藏是通过内联脚本完成的

案例 3 - 如果需要，脚本会隐藏 &lt;div&gt; 元素

总结

案例 2 - 如果需要的脚本来自外部（第三方）源，但 `<div>` 元素的隐藏是通过内联脚本完成的

案例 3 - 如果需要，脚本会隐藏 `<div>` 元素