我们是否应该使用 < 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>中吗？

75267 次浏览
小开
最佳答案

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

小开

虽然 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>

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

小开

经过多天的思考和来回修改我的代码之后，我认为我现在有了更清晰的图片，并且愿意在我忘记之前分享我对这个主题的两点意见。

<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>元素中的内容可能会暂时出现 内容

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

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

禁用 JavaScript

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

已启用但需要的 JavaScript 脚本被阻塞

  • <noscript>元素中的内容根本不会出现，什么都不会显示！
  • <div>元素中的内容在被隐藏之前可能会立即出现，但是没有显示任何内容！

接收到启用的 JavaScript 和所需的脚本

  • <noscript>元素中的内容根本不会出现，js 内容如图所示
  • 在隐藏之前，<div>元素中的内容可能会暂时出现 内容

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

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

禁用 JavaScript

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

已启用但需要的 JavaScript 脚本被阻塞

  • <noscript>元素中的内容根本不会出现，什么都不会显示！
  • 出现 <div>元素中的内容，显示非 js 内容

接收到启用的 JavaScript 和所需的脚本

  • <noscript>元素中的内容根本不会出现，js 内容如图所示
  • 在隐藏之前，<div>元素中的内容可能会暂时出现 内容

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

总结一下

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

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

对于 noscript，我看到的一个有用的应用程序是用于逐步增强的异步加载大量内容(尤其是“在折叠之下”)。大图像、 iframe 等可以包装在 HTML 源代码中的 noscript 中，然后在 DOM 准备好之后，可以使用 JavaScript 将取消包装的元素附加到页面中。这样可以解锁页面，并且可以获得更快的初始加载体验，特别是如果您的界面依赖于文档准备好后应用的 JS/JQ 交互(对于我参考的投资组合页面，2秒对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 启用始终

小开

现在似乎几乎每个浏览器都运行 Javascript，但是你永远不知道谁会访问你的站点。现在甚至 屏幕阅读器和 网络爬虫都使用 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>更好。

小开

the simple ideea is in this times your website may adapt to no javascript usage on slow devices using noscript tag like an entity for the entire content of your website**(你的 html 应该准备没有 javascript 和所有的控件也必须工作，如果 javascript 是关闭的，用户使用基本的 html 控件应该能够做他们之前做的一切，当 javascript 是活动的。所以 <noscript></noscript>可以是动态切换到相同的内容，以其他方式相同的结果 = 解决问题，这就是为什么用户打开你的网址).**You can see is no matter javascript is or not present ,the website's functionality can be "the same" in any cases js enabled / disabled.On chinese slow devices eg:Samsung neo mini phone this method can run an website without any delays on low internet traffic.. 如果 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>

and to say more on this .. right noscript was invented to work like a trigger when js is disabled but you can work around this feature to change the course of internet functionality about how is now ,to change it's dynamics....

小开

在不久的将来，你将能够使用 Css@media script:

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

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

如果您使用的是 Google Maps API，那么您将通过标记得到一个静态图像，并将其替换为动态 JS 映射。谷歌最近已经开始对所有东西收费，因此上面的例子会让你付出两次代价，一次是静态的，一次是动态的。只有在禁用 JS 时，静态映射才是相关的。因此，为了节省双倍支付，在我看来，最好的解决方案是将静态映射的标记包装在标记中。


提交答案