使用noscript标签在客户端禁用JavaScript时显示消息

Question

使用noscript标签在客户端禁用JavaScript时显示消息

javascriptnoscript

23

我希望能够在客户端禁用JavaScript时标记一条消息。我在这里搜索并发现可以使用<noscript>标签来处理此类事情。

我在w3schools编辑器中进行了测试，但它没有起作用，请告诉我是否不应该使用<noscript>或者我在这部分缺少了其他内容？

enter image description here

- Trialcoder

w3schools 可能使用 JavaScript 来填充结果字段。如果它被禁用，它就无法这样做。只需创建一个 HTML 页面并在浏览器中加载即可。 - Felix Kling

13

你不应该使用W3Schools的编辑器进行测试和开发。这是你的第一个问题。 - Bojangles

1

这不是对问题的答案，但请阅读此网址http://w3fools.com/。 - JohannesAndersson

6个回答

9

你是正确的。<noscript>标签用于仅在禁用JavaScript时显示。为了测试此功能，请执行以下操作：

将此代码片段保存在名为“test.html”的文件中。
使用浏览器打开它。
启用/禁用JavaScript（在FireFox中，此设置位于：工具/选项/内容/启用JS）。

如您所见，您可以在<noscript>标签内放置您会放置在页面正文中的任何HTML内容。

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

- jensP

7

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

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

我找到的最佳解决方案是：

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

- frank

3

<noscript>标签就是为这种情况设计的，就像<script>标签是为JS设计的一样。请注意，使用meta标签刷新：

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

这意味着在IE浏览器中（至少是IE10），可以通过增加Internet选项安全级别来轻松禁用此功能（可能是因为之前已经禁用了JS）。当安全设置提高时，“允许META REFRESH”选项也被禁用。

- RickL

0

您可以使用与stackoverflow相同的方法。请查看我的jsfiddle链接。当禁用Javascript时，在第一个noscript块中，在body标记后面，您需要添加一个填充顶部的空子div，以便在您的正文中添加所需的内容，然后最后，另一个带有固定位置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;
         }

- JB-Franco

0

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

- thesimm

1

这个解决方案的问题在于，即使启用了JavaScript，消息也会在整个页面加载完成之前一直显示。 - dreamer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rubyist · Accepted Answer

尝试这个：-

How to detect JavaScript is disabled in browser?

我们知道，<script>标签用于JavaScript。同样的方式，当浏览器禁用JavaScript时，<noscript>标签会发挥作用。

<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中有一个名为“meta refresh”的元标记，它将在指定的时间间隔内将用户重定向到另一个页面。

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

我们可以看到noscript标签中的代码，其中有一个“meta refresh”标签，间隔为“0”秒。由于该页面中JavaScript被禁用，浏览器会被重定向到“ShowErrorPage.html”以显示一些警告信息。

希望这能帮到你。