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

Question

提问by Jitendra Vyas

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.

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

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

来源：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>?

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

Answer 1

采纳答案by Tor Valamo

It's better to have the default be non-javascript, and then let a javascript code overwrite with a javascript enabled page. Doesn't have to be much. Can just be a display:none;block, which is then set to display:block;by javascript, and vice versa for the non-js page.

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

Answer 2

回答by Question Overflow

After pondering for many days and changing my code back and forth, I think I have clearer picture now and would like to share my two cents worth on the subject before I forget.

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

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

Depending on the situation, there are three cases for consideration:

根据情况，有以下三种情况可供考虑：

Case 1 - If required script is inline

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

JavaScript disabled

禁用 JavaScript

Content in <noscript>element appears immediately, non-js content is shown
Content in <div>element appears immediately, non-js content is shown

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

JavaScript enabled

启用 JavaScript

Content in <noscript>element does not appear at all, js content shown
Content in <div>element may momentarily appear before being hidden, js content shown

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

For this case, using <noscript>element is advantageous.

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

Case 2 - If required script is from external (third-party) source, but hiding of `<div>`element is done with inline script

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

JavaScript disabled

禁用 JavaScript

Content in <noscript>element appears immediately, non-js content is shown
Content in <div>element appears immediately, non-js content is shown

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

JavaScript enabled but required script is blocked

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

Content in <noscript>element does not appear at all, nothing is shown!
Content in <div>element may momentarily appear before being hidden, nothing is shown!

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

JavaScript enabled and required script is received

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

Content in <noscript>element does not appear at all, js content shown
Content in <div>element may momentarily appear before being hidden, js content shown

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

For this case, using <noscript>element is advantageous.

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

Case 3 - If required script hides the `<div>`element

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

JavaScript disabled

禁用 JavaScript

Content in <noscript>element appears immediately, non-js content is shown
Content in <div>element appears immediately, non-js content is shown

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

JavaScript enabled but required script is blocked

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

Content in <noscript>element does not appear at all, nothing is shown!
Content in <div>element appears, non-js content is shown

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

JavaScript enabled and required script is received

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

Content in <noscript>element does not appear at all, js content shown
Content in <div>element may momentarily appear before being hidden, js content shown

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

For this case, using <div>element is advantageous.

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

In summary

总之

Use <noscript>element if rendering of the HTML content depends on third-party scripts or if the required script is inline. Else, use <div>element and make sure that the required script contains:

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

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

Answer 3

回答by Steve Hemsley

Although Tor Valamo has an elegant answer to this problem, there is an issue which may cause you to opt out of using this technique.

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

The problem is (usually) IE. It has the tendency to load and execute the JS a bit slower than other browsers causing it to sometimes flash the "Please Enable Your Javascript" div for a split second before it then loads the JS and hides the div.

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

It is annoying and to get around this you can implement the "classic". <noscript>redirect approach.

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

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

This is the most solid technique that I've come across with regards to this little nasty.

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

Answer 4

回答by Geordie Kaytes

One useful application for noscript that I've seen is for a progressively-enhanced async loading of heavy content (especially "below the fold"). Big images, iframes, etc. can be wrapped in noscript in the HTML source, and then the unwrapped elements can be appended to the page using JavaScript after the DOM is ready. This unblocks the page and can make for a much quicker initial loading experience, especially if your interface relies on JS/JQ interactions applied after the document is ready (2 seconds vs. 6 seconds for a portfolio page I consulted on).

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

Answer 5

回答by Gregory Magarshak

These days it seems almost every browser runs Javascript, but you can never know who is going to be accessing your site. These days even screen readersand web crawlersuse Javascript, and sometimes make AJAX requests if they have to.

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

That said, if you're going to fall back to no-Javascript, there is a much better way than a <noscript>tag. Simply do this in the HEADof your document:

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

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

With this technique, you can easily refer to the Q_jsclass in your CSS to hide things. With the <noscript>tag, the best you can hope for is to include an additional CSS file to override previous CSS. This becomes important when some elements with static content are supposed to be hidden right away (not flicker) until Javascript can make them more dynamic.

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

In short, the technique I suggested addresses all your cons 1-5, and I believe it's strictly better than using <noscript>.

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

Answer 6

回答by Null

In the (hopefully near) future you will be able to use css scripting:

在（希望不久的）将来，您将能够使用css 脚本：

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

Answer 7

回答by Peter

Like all things, use the right tool for the job.

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

If you are using Google Maps API, you have a static image via tag and that gets replaced with dynamic JS map. Google have recently started charging for everything thus with the above example it's going to cost you twice, once for static and once for dynamic. The static map is only relevant if JS is disabled. Therefore to save double paying it seems to me the best solution is to wrap the tag for the static map in a tag.

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

Answer 8

回答by Constantin

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**(your html should be prepared to no javascript and all controls must work also if javascript is off,users using basic html controls shoul be able to do everything they done before when javascript was active.So <noscript></noscript>can be the dynamic switch to the same content in other way with the same results=solving the problem wich is the reason the users open your url).**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.. try to run this auto double functionallity website if js is on/off cases:

简单的想法是在这个时候，您的网站可能会适应在慢速设备上不使用 javascript 使用 noscript 标签，就像您网站的整个内容的实体**（您的 html 应该准备好没有 javascript 并且所有控件也必须工作，如果 javascript关闭，使用基本 html 控件的用户应该能够在 javascript 处于活动状态时完成他们之前所做的一切。所以<noscript></noscript>可以以其他方式动态切换到相同的内容，结果相同=解决问题，这就是用户打开的原因你的网址).**您可以看到，无论是否存在 javascript，在启用/禁用 js 的任何情况下，网站的功能都可以“相同”。在china慢速设备上，例如：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>

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....

并说更多关于这一点..正确的 noscript 被发明为在禁用 js 时像触发器一样工作，但您可以解决此功能以更改 Internet 功能的进程，例如现在如何，更改其动态....

Answer 9

回答by R.Raaj Prashanth

I create a full height, full width, position:fixed div in all pages with some id .

我在所有带有 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){




});

I am not an expert . This worked for me . I am sorry but, this case will suit only if you want the user to have his javascript enabled always

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

Answer 10

回答by Stokely

The "noscript" element is not supported in XML or in XHTML5 polyglot, so not recommended by the W3C.

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

I also do not like the idea that every page starts out with a no-script viewable div that is then hidden by some Javascripted circus trick on every page of a website. Dangerous and more scripting dependencies that could fail or wreak havoc if changed by a later developer.

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

A better strategy is to design your site with a basic html design that wraps around all inner scripted content so the user at least sees a page design with a header and a place where basic content would appear. If its empty its pretty obvious they cannot view the content for a reason. I would then add a tiny message or information icon in the footer saying, if you see no content your javascript is disabled. That appears whether they see scripted content or not. This solution is scripting free.

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

As a last resort you could have that message be hidden by scripts using display:none at the bottom of every web page.

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

It's not as sexy as providing alternate content or a message box, but in the case of heavy Angular websites you would have to create a new content page for them anyway should scripting be disabled. This solution also accounts for no script support in a user-agent versus disabled support, and makes your web page 100% XML and HTML5 compatible with all user agents by avoiding the noscript tag.

它不像提供替代内容或消息框那么吸引人，但在大量 Angular 网站的情况下，如果禁用脚本，您无论如何都必须为它们创建一个新的内容页面。该解决方案还解决了用户代理中没有脚本支持与禁用支持的问题，并通过避免使用 noscript 标签使您的网页 100% XML 和 HTML5 与所有用户代理兼容。

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

提问by Jitendra Vyas

采纳答案by Tor Valamo

回答by Question Overflow

Case 1 - If required script is inline

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

Case 2 - If required script is from external (third-party) source, but hiding of `<div>`element is done with inline script

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

Case 3 - If required script hides the `<div>`element

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

In summary

总之

回答by Steve Hemsley

回答by Geordie Kaytes

回答by Gregory Magarshak

回答by Null

回答by Peter

回答by Constantin

回答by R.Raaj Prashanth

回答by Stokely

相关推荐

最近更新

标签

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

提问by Jitendra Vyas

采纳答案by Tor Valamo

回答by Question Overflow

Case 1 - If required script is inline

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

Case 2 - If required script is from external (third-party) source, but hiding of <div>element is done with inline script

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

Case 3 - If required script hides the <div>element

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

In summary

总之

回答by Steve Hemsley

回答by Geordie Kaytes

回答by Gregory Magarshak

回答by Null

回答by Peter

回答by Constantin

回答by R.Raaj Prashanth

回答by Stokely

相关推荐

如何在 JavaScript 中用“_”替换字符串中所有出现的“/”？

Javascript 保留未定义的 JSON.stringify 否则会删除

Javascript 获取脚本路径

Javascript 如何在 document.createElement("span"); 之后将文本添加到 span 中？

相关推荐

最近更新

标签

Case 2 - If required script is from external (third-party) source, but hiding of `<div>`element is done with inline script

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

Case 3 - If required script hides the `<div>`element

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