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

70

我在这里找到了一些好处：

  • noscript元素仅检测浏览器是否启用了JavaScript。如果在防火墙而不是浏览器中禁用了JavaScript，则JavaScript将不会运行，并且noscript元素的内容也不会显示。

  • 为了使脚本能够运行，许多脚本都依赖于所支持的一种或多种语言的特定功能（例如document.getElementById）。如果不支持所需的功能，则无法运行JavaScript，但是由于支持JavaScript本身，因此不会显示noscript内容。

  • 使用noscript元素最有用的位置是在页面的顶部，在那里可以选择确定在页面加载时将哪些样式表和meta元素应用于页面，而不必等到页面加载完成。不幸的是，noscript元素仅在页面主体内有效，因此无法在头部使用。

  • noscript元素是块级元素，因此仅在禁用JavaScript时才可用于显示整个内容块。不能内联使用。

  • 理想情况下，网页应使用HTML表示内容，使用CSS表示外观，并使用JavaScript表示行为。使用noscript元素是在HTML内部应用行为，而不是从JavaScript应用行为。

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

我非常同意最后一点。有没有办法制作和添加外部<noscript>文件？如果我们把<noscript>在<head>吗？

javascript  xhtml  web-standards  noscript 
— Jitendra Vyas
source
6
仍然有禁用JavaScript的防火墙吗？大约13年前，我落后于一位，那时候真是太糟糕了。我的猜测是，如今这样的政策将不再可行，因为大约三分之一的网络将不再可用
— Sean Patrick Floyd 2010年
14
根据最新规范，<noscript>允许放在头部，实际上在几乎所有developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript上都受支持。同样，noscript标记也可以由CSS设置样式以使其内联，就像可以对任何块级元素进行样式设置以将其显示变为内联一样
— DMTintner 2014年
2
noscript标签可以很好地用在页面的头部。
— Diablo Geto 2014年
正如其他人提到的那样，最新规范中的<head>中允许使用<noscript>元素。
— Gaurang Patel，

Answers:

48

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

— 托·瓦拉莫
source
32
Javascript设置的display:block “您的浏览器似乎不支持JavaScript”display:none可以替代NOSCRIPT，但是您正在丢失语义信息（机器人不知道您在说什么）。
— Konerak
2
为确保启用JavaScript时，此方法不会引起非JavaScript版本的闪烁，请参阅stackoverflow.com/questions/3221561/…了解如何避免闪烁。（使用head标记中的javascript隐藏HTML标记，因为该标记在读取正文之前存在。然后在文档准备就绪时再次显示。）
— ToolmakerSteve 2014年
6
你提到它的更好......。为什么比<noscript>标签更好？
— random_user_name 2014年
1
@cale_b如果您阅读原始帖子，则会看到完整的原因列表。
— Tor Valamo 2014年
2
由于脚本的原因，曾经显示HTML内容很危险。无论脚本依赖项如何，默认情况下都应显示原始内容和HTML。noscript作为元素的原始思想仅在浏览器中禁用脚本时才会出现。通过反转该概念，现在通过显式脚本触发内容和noscript，可以删除这些没有脚本的元素的本机显示。
— 斯托基
25

在考虑了很多天并来回更改我的代码后，我认为我现在的情况更加清楚了，在我忘记之前，我希望分享我在该主题上的两分钱。 

<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>元素是有利的。

综上所述

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

document.getElementById('noscript').style.display='none';
— 问题溢出
source
8

尽管Tor Valamo可以很好地解决此问题，但仍有一个问题可能导致您选择退出使用此技术。

问题是（通常是）IE。它有加载和执行JS的趋势，比其他浏览器要慢一些，这导致它有时会先闪动“ Please Enable Your Javascript” div一秒钟，然后再加载JS并隐藏div。

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

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

这是我遇到过的最讨厌的技巧。

— 史蒂夫·赫姆斯利
source
只要您重定向到仍以其他方式提供相同功能和信息的页面即可。否则，这确实非常烦人。
— user4815162342'2
有关如何避免闪烁的信息，请参见stackoverflow.com/questions/3221561/…。（使用head标记中的javascript隐藏HTML标记，因为该标记在读取正文之前存在。然后在文档准备就绪时再次显示。）
— ToolmakerSteve 2014年
我用chrome扩展程序对此进行了测试，该扩展程序可以阻止JS，并且不起作用（不重定向），只能从浏览器的设置中禁用JS。不是最佳解决方案
— Raja Khoury
7

我见过的一个有用的noscript应用程序是逐步增强大量内容的异步加载（尤其是“折叠之下”）。可以在HTML源代码中的noscript中包装大图像，iframe等，然后可以在DOM准备就绪后使用JavaScript将未包装的元素附加到页面上。这可以解除页面的阻塞，并可以提供更快的初始加载体验，尤其是如果您的界面依赖于文档准备好后应用的JS / JQ交互（我参考的投资组合页面为2秒而不是6秒）。

— 乔治·凯特斯（Geordie Kaytes）
source
5

如今，似乎几乎所有浏览器都运行Javascript，但您永远无法知道谁将访问您的网站。这些天甚至屏幕阅读器和网络爬虫使用Javascript，有时也必须使用AJAX请求。

就是说，如果您要使用no-Javascript，那么还有比<noscript>标记更好的方法。只需在HEAD您的文档中执行以下操作：

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

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

简而言之，我建议的技术可以解决您的所有缺点1-5，并且我认为它绝对比使用更好<noscript>。

— 格雷戈里·玛格沙克（Gregory Magarshak）
source
网络爬虫对JS的使用仍然受到严格限制。用JS隐藏事物会眨眼。
— Gherman
如果在元素之后加载了JavaScript，它只会产生闪烁。这不是隐藏元素，而是在<head>中添加Javascript的容器中添加类，该Javascript在任何这些元素之前加载！
— 格雷戈里·玛格沙克'17
4

在不久的将来（希望不久），您将可以使用css @media脚本：

@media (scripting: none) {
    /* styles for when JS is disabled */
}
— 空值
source
1

我在所有带有某些id的页面中创建了全高，全宽，position：fixed 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时才适用

— 拉杰·普拉汉斯（R.Raaj Prashanth）
source
$（'＃noscript_div'）。hide（）; 如果jquery失败，将不会触发
— mowgli 2014年
1

简单的想法是，这一次您的网站可能无法在慢速设备上使用noscript标记（例如，为您网站的整个内容使用实体）适应不使用javascript **（您的html应该没有javascript，并且所有控件也必须能够正常工作，如果javascript已关闭，使用基本html控件的用户应能够在javascript处于活动状态时做他们之前所做的所有事情。因此<noscript></noscript>可以以其他方式动态切换到相同内容并获得相同结果==解决问题是用户打开的原因您的网址。**您可以看到，无论是否存在javascript，在启用或禁用js的情况下，网站的功能可以是“相同的”。在中文慢速设备上，例如：Samsung neo mini手机，该方法可以在互联网流量不降低的情况下运行网站。.尝试运行此自动双重功能网站如果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时像触发器一样工作，但是您可以解决此功能，以改变Internet功能的发展过程，以改变其动态...。

— 康斯坦丁
source
1

像所有事物一样，使用正确的工具完成工作。

如果您使用的是Google Maps API，则可以通过标记获取静态图片，然后将其替换为动态JS地图。Google最近开始对所有内容收费，因此上述示例将向您收取两次费用，一次是静态费用，一次是动态费用。仅当禁用JS时，静态映射才有意义。因此，为了节省双付，在我看来，最好的解决方案是将静态地图的标签包装在标签中。

— 彼得
source
-1

XML或XHTML5多语言版本不支持“ noscript”元素，因此W3C不建议使用。

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

更好的策略是使用围绕所有内部脚本内容的基本html设计来设计您的网站，以便用户至少看到带有标题和显示基本内容的位置的页面设计。如果将其清空，则很明显，由于某种原因，他们无法查看内容。然后，我会在页脚中添加一条微小的消息或信息图标，如果您看不到任何内容，则说明您的JavaScript已被禁用。看来他们是否看到脚本内容。该解决方案是免费的脚本。

作为最后的选择，您可以使用每个网页底部的display：none脚本来隐藏该消息。

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

— 斯托克利
source
1
投票失败。诸如<noscript>之类的东西的用途就是完全按照您的建议进行操作：为无法使用或不会使用JS的用户（仍然有些！）提供合理的UX。这里没有JS“马戏团把戏”，只有适合此确切目的的基本Web标准。为什么要重新发明它们并使UX在此过程中表现不佳？
— Marnen Laibow-Koser '04年
-12

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

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

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

— 穆罕默德
source
2
我建议您不要使用<noscript>，可以使用以下代码。<HTML> <head> <script> window.location =“ some-page.php”; </ script> </ head> <body> <p>请激活JavaScript。</ p> </ body> </ HTML>如果在任何情况下都未启用JS，则将显示该消息，否则用户将被重定向到目标页面。
— mohammad
我建议您不要使用<noscript>，可以使用以下代码。“ <HTML> <head> <script> window.location =” some-page.php“; </ script> </ head> <body> <p>请激活JavaScript。</ p> </ body> </ HTML>”，如果在任何情况下都未启用JS，则将显示该消息，否则用户将被重定向到目标页面。
— mohammad
修复了格式设置-只需选择代码，然后按工具栏上的代码按钮（或将其缩进4个空格）即可。
— Rich Bradshaw
投票失败。为什么要重新发明该标准已经给您带来的好处？
— Marnen Laibow-Koser
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.