73

I found some good cons here:

  • The noscript element only detects whether the browser has JavaScript enabled or not. If JavaScript is disabled in the Firewall rather than in the browser then the JavaScript will not run and the content of the noscript element will not be displayed.

  • Many scripts are dependent on a specific feature or features of the language being supported in order for them to be able to run (for example document.getElementById). Where the required features are not supported the JavaScript is unable to run but since JavaScript itself is supported the noscript content will not be displayed.

  • The most useful place to use the noscript element is in the head of the page where it would be able to selectively determine what stylesheet and meta elements get applied to the page as the page is loading rather than having to wait until the page is loaded. Unfortunately the noscript element is only valid within the body of the page and so cannot be used in the head.

  • The noscript element is a block level element and therefore can only be used to display entire blocks of content when JavaScript is disabled. It cannot be used inline.

  • Ideally, web pages should use HTML for the content, CSS for the appearance, and JavaScript for the behavior. Using the noscript element is applying a behavior from within the HTML rather than applying it from JavaScript.

Source: http://javascript.about.com/od/reference/a/noscriptnomore.htm

I very much agree on last point. Is there a way to make and add an external <noscript> file? Should we place <noscript> in the <head>?

4

11 回答 11

49

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

于 2010-01-31T03:58:03.993 回答
26

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

<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

  • element中的内容<noscript>立即出现，非js内容显示
  • element中的内容<div>立即出现，非js内容显示

启用 JavaScript

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

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

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

禁用 JavaScript

  • element中的内容<noscript>立即出现，非js内容显示
  • element中的内容<div>立即出现，非js内容显示

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

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

启用 JavaScript 并收到所需的脚本

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

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

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

禁用 JavaScript

  • element中的内容<noscript>立即出现，非js内容显示
  • element中的内容<div>立即出现，非js内容显示

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

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

启用 JavaScript 并收到所需的脚本

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

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

总之

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

document.getElementById('noscript').style.display='none';
于 2012-05-07T09:55:06.967 回答
8

尽管 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>

这是我遇到的关于这个小讨厌的最可靠的技术。

于 2011-08-18T10:46:33.297 回答
7

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

于 2012-11-27T13:17:05.177 回答
5

如今，似乎几乎每个浏览器都运行 Javascript，但您永远无法知道谁将访问您的网站。这些天来，甚至屏幕阅读器和网络爬虫都使用 Javascript，并且有时会在必要时发出 AJAX 请求。

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

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

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

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

于 2015-06-09T23:19:24.883 回答
4

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

@media (scripting: none) {
    /* styles for when JS is disabled */
}
于 2018-06-17T21:40:08.870 回答
1

我在所有具有一些 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

于 2013-05-17T07:19:08.210 回答
1

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

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

于 2018-08-29T08:31:36.737 回答
1

简单的想法是，在这个时代，您的网站可能会适应在慢速设备上不使用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 时像触发器一样工作，但是您可以解决此功能来改变互联网功能的进程，以改变它的动态......

于 2016-01-12T23:04:25.780 回答
-1

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

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

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

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

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

于 2018-08-29T22:34:28.567 回答
-12

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

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

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

于 2010-11-13T20:56:29.133 回答