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

时间：2010-01-31 03:46:54

标签： javascript xhtml web-standards noscript

我在这里找到了一些好消息：

  • 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>吗？

11 个答案:

答案 0 :(得分：44)

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

答案 1 :(得分：24)

经过多日思考并来回更改我的代码后，我觉得我现在有了更清晰的画面，想在忘记之前分享我的两分钱。 

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

VS 

<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';

答案 2 :(得分：8)

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

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

这很烦人，你可以实现“经典”。 <noscript>重定向方法。

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

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

答案 3 :(得分：7)

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

答案 4 :(得分：5)

现在几乎每个浏览器都运行Javascript，但您永远无法知道谁将访问您的网站。这些天即使screen readers和web crawlers使用Javascript，有时也会发出AJAX请求。

也就是说，如果你要回到no-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>更好。

答案 5 :(得分：2)

在（希望接近）未来，您将能够使用css scripting：

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

答案 6 :(得分：1)

简单的想法就是在这个时候你的网站可以适应慢速设备上的javascript使用，使用noscript标签就像你的网站的整个内容的实体**（你的html应该准备好没有javascript和所有如果javascript关闭，控件也必须工作，使用基本html控件的用户应该能够在javascript处于活动状态之前完成他们所做的一切。所以<noscript></noscript>可以动态切换到相同的内容以其他方式使用相同的结果=解决问题，这是用户打开你的网址的原因。）**你可以看到无论javascript是否存在，网站的功能都可以＆＃34;相同＆＃34 ;在任何情况下js启用/禁用。在中国慢设备，例如：三星neo迷你手机这种方法可以运行网站，没有任何延迟低互联网流量.. 如果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被禁用时像触发器那样工作但是你可以解决这个功能来改变关于现在如何改变它的互联网功能的过程。动力学....

答案 7 :(得分：0)

我创建一个完整的高度，全宽，位置：所有页面中的固定div，带有一些id。 

<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时，此案例才适合

答案 8 :(得分：0)

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

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

答案 9 :(得分：0)

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

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

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

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

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

答案 10 :(得分：-10)

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

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

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

相关问题
最新问题