22

如果在客户端禁用了 javascript，我想标记一条消息。我在这里搜索并找到<noscript>了用于处理这些东西的标签。

我在 w3schools 编辑器上做了这个来检查，但它不起作用让我知道这<noscript>是否不适合这个或我在这部分中缺少的其他东西？

在此处输入图像描述

4

6 回答 6

47

试试这个 ：-

How to detect JavaScript is 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>

如何处理浏览器中禁用的 JavaScript？

当 JavaScript 被禁用时，只是尝试重定向到某个页面，我们可以在其中显示 Javascript 被禁用的消息。HTML 中有一个名为“元刷新”的元标记，它将在该标题中指定的时间间隔内将用户重定向到另一个页面。

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

我们可以看到上面的代码在noscript里面，有一个“元刷新”标签，间隔为“0”秒。由于该页面中禁用了 JavaScript，浏览器被重定向到“ShowErrorPage.html”以显示一些警告消息。

我希望这能帮到您。

于 2013-03-05T09:08:06.290 回答
9

你是对的。该<noscript>标记仅用于在 JavaScript 被禁用时显示。为了对此进行测试，请执行以下操作：

  • 将此片段保存在文件“test.html”中。
  • 用你的浏览器打开它。
  • 启用/禁用 JavaScript（在 FireFox 中，此处为：工具/选项/内容/启用 JS）。

如您所见，您可以将任何 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>
于 2013-03-05T09:19:00.210 回答
7 
<noscript>
   <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

这不是一个好的解决方案，因为 IE11（和之前的版本）有一个安全选项，当设置为“高”时会禁用 Javascript 和元刷新标签！

我发现处理这种情况的最佳解决方案是：

<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>
于 2015-05-22T19:42:06.510 回答
3

<noscript>用于这种事情，就像<script>用于 JS 一样。请注意，使用元标记刷新：

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

意味着这很容易在 IE（至少 IE10）中通过增加 Internet 选项安全性（这可能首先用于禁用 JS）来禁用。当安全设置增加时，“允许 META REFRESH”选项被禁用。

于 2015-02-09T09:26:41.267 回答
1

将“不支持”消息放在 div 中，并在页面加载时使用 JavaScript 隐藏 div

于 2013-03-05T08:45:45.973 回答
0

您可以使用与 stackoverflow 相同的方法。请参阅我的 jsfiddle 链接。当 Javascript 被禁用时，在第一个 noscript 块中，就在 body 标记之后，您可以在一个空的子 div 中添加一个 padding-top，这样您就可以在您的 body 中添加您想要的内容，然后，最后，另一个带有固定位置 div 的 noscript 块，其中包含您想要的警告消息。尝试在启用和不启用 javascript 的情况下运行它。让我知道！:)

在此处查看代码：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>

所以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;
         }
于 2016-09-19T17:54:28.857 回答