如果使用 noscript 标记在客户端禁用 javascript，则显示消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15219257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show message if javascript disabled on client side using noscript tag
提问by Trialcoder
I want to flag a message if javascript is disabled at client side. I searched here and found <noscript>tag to use for handling this stuff.
如果 javascript 在客户端被禁用，我想标记一条消息。我在这里搜索并找到<noscript>了用于处理这些东西的标签。
I did this at w3schools editor to check but its not working let me know if this <noscript>is not meant for this or something else I am missing in this part ?
我在 w3schools 编辑器上做了这个检查，但它不起作用让我知道这<noscript>是否不适用于这个或我在这部分缺少的其他东西？
回答by Rubyist
Try This :-
试试这个 ：-
How to detect JavaScript is disabled in browser?
As we know, tag is used for JavaScript. Same way there is tag which gets in action when the JavaScripts disabled in browser.
众所周知，标签用于 JavaScript。同样，当浏览器中禁用 JavaScript 时，标签会起作用。
<script>Put Sample code here for execution when JavaScript is Active </script>
<noscript>Put Sample code here for execution when JavaScript is Disabled</noscript>
How to handle disabled JavaScript in browser?
如何在浏览器中处理禁用的 JavaScript？
When JavaScript is disabled, Just tried to redirect to some page where we can display the message that Javascript is disabled. There is meta tag in HTML named “meta refresh” which will redirect the user to another page in the interval specified in that header.
当 JavaScript 被禁用时，只是尝试重定向到某个页面，在那里我们可以显示 Javascript 被禁用的消息。HTML 中有一个名为“meta refresh”的元标记，它将用户重定向到该标题中指定的间隔内的另一个页面。
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>
As, we can see above code inside noscript, there is “meta refresh” tag with interval of “0″ second. As, the JavaScript is disabled in that page, the browser gets redirected to “ShowErrorPage.html” to show some warning message.
因为，我们可以在 noscript 中看到上面的代码，有“元刷新”标签，间隔为“0”秒。由于该页面中的 JavaScript 被禁用，浏览器被重定向到“ShowErrorPage.html”以显示一些警告消息。
I hope this will help you.
我希望这能帮到您。
回答by jensP
You are right. The <noscript>tag is used to show only if JavaScript is disabled.
In order to test this, do the following:
你是对的。该<noscript>标签仅用于在禁用 JavaScript 时显示。为了测试这一点，请执行以下操作：
- Save this snippet in a file "test.html".
- Open it with your brower.
- Enable/Disable JavaScript (In FireFox this is here: Tools/Options/Content/Enable JS).
- 将此代码段保存在文件“test.html”中。
- 用你的浏览器打开它。
- 启用/禁用 JavaScript（在 FireFox 中，这里是：工具/选项/内容/启用 JS）。
As you can see, you can put any HTMLinside the <noscript>tag that you would put inside the body of a page.
如您所见，您可以将任何 HTML放入<noscript>标签中，而该标签将放入页面正文中。
<html>
<body>
<h1>Simple Example Page</h1>
<script type="text/javascript">
document.write("Hi, JavaScript is enabled!");
</script>
<noscript>
<div style="border: 1px solid purple; padding: 10px">
<span style="color:red">JavaScript is not enabled!</span>
</div>
</noscript>
</body>
</html>
回答by frank
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>
is not a good solution as IE11 (and previous) have a security option that when set to 'high' disables both Javascript and Meta Refresh Tags!
不是一个好的解决方案，因为 IE11（和以前的）有一个安全选项，当设置为“高”时，将禁用 Javascript 和元刷新标签！
The best solution I have found to handle this case is :
我发现处理这种情况的最佳解决方案是：
<noscript class="noscript">
<div id="div100">
Please enable javascript in your browser .... blah blah
</div>
</noscript>
<style>
body{
position:relative;
}
.noscript {
width:100%;
height:100%; /* will cover the text displayed when javascript is enabled*/
z-index:100000; /* higher than other z-index */
position:absolute;
}
.noscript #div100{
display:block;
height:100%;
background-color:white;
}
</style>
回答by RickL
<noscript>is meant for this kind of thing, just as <script>is meant for JS. Be aware that using the meta tag refresh:
<noscript>是为了这种事情，就像<script>是为了 JS。请注意，使用元标记刷新：
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>
means that this is easily disabled in IE (IE10 at least) by increasing the Internet Options Security (which was probably used to disable the JS in the first place). The "allow META REFRESH" option is disabled when the security setting is increased.
意味着通过增加 Internet 选项安全性（这可能首先用于禁用 JS），这很容易在 IE（至少 IE10）中禁用。当安全设置增加时，“允许 META REFRESH”选项被禁用。
回答by thesimm
Place the 'does not support' message in a div and use JavaScript to hide the div when the page loads
将“不支持”消息放在 div 中，并在页面加载时使用 JavaScript 隐藏 div
回答by JB-Franco
You can use the same method used by stackoverflow. See my jsfiddle link. When Javascript is disabled, within the first noscript block, just after the body tag, you go to add a padding-top to an empty child div, so you can add the content you want in your body, and then, in the end, another noscript block with a fixed position div inside, having the warning message you want. Try to run it, with and without javascript enabled. Let me know! :)
您可以使用与 stackoverflow 相同的方法。请参阅我的 jsfiddle 链接。当 Javascript 被禁用时，在第一个 noscript 块中，就在 body 标签之后，你去添加一个 padding-top 到一个空的子 div，这样你就可以在你的 body 中添加你想要的内容，然后，最后，另一个带有固定位置 div 的 noscript 块，其中包含您想要的警告消息。尝试运行它，启用和不启用 javascript。让我知道！:)
See the code here: https://jsfiddle.net/go60f00n/
请参阅此处的代码：https: //jsfiddle.net/go60f00n/
<noscript>
<div id='noscript_padding'></div>
</noscript>
<div>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt nunc ac faucibus mattis. Gravida tempus turpis Morbi vitae sed Suspendisse auctor dignissim nulla adipiscing. Adipiscing justo lacinia justo Vivamus Vestibulum amet ut Donec vitae aliquet. Orci tempus orci Donec nibh eget tellus pede semper adipiscing leo. A et id sagittis velit venenatis.</p>
<p>Tellus ridiculus ipsum pretium condimentum Ut elit sed vitae amet In. Curabitur ipsum elit interdum tortor semper at dolor justo consequat leo. Id fermentum vitae tincidunt pretium lacus leo Cras urna risus urna. Pretium Vestibulum et euismod nec pede et tincidunt condimentum laoreet vel. Dolor vestibulum laoreet habitant a Nulla.</p>
<p>Lobortis lobortis quis elit mollis quis risus Morbi in augue montes. Mauris ipsum libero tellus et Quisque id non justo nibh dui. Dui nisl at Fusce Curabitur interdum tincidunt sed Vestibulum platea justo. At ut ante eget ac sem sed nulla id nunc mus. Velit In faucibus a auctor Sed Morbi habitasse est urna natoque. </p>
</div>
<noscript>
<div id='noscript_warning'>Please enable Javascript!</div>
</noscript>
so the css code:
所以css代码：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
p {
margin: 0;
}
#noscript_padding {
padding-top: 1.9em;
}
#noscript_warning {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 101;
text-align: center;
font-weight: bold;
color: #FFF;
background-color: #AE0000;
padding: 5px 0 5px 0;
}
