如果使用noscript标记在客户端禁用了javascript,则显示消息

时间:2013-03-05 08:42:16

标签: javascript noscript

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

我是在w3schools编辑那里检查的,但它没有工作让我知道这个<noscript>是不是这个或我在这部分缺少的其他东西?

enter image description here

6 个答案:

答案 0 :(得分:39)

试试这个: -

How to detect JavaScript is disabled in browser?

众所周知,tag用于JavaScript。同样的方式是在浏览器中禁用JavaScripts时,标记会生效。

<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里面看到上面的代码,有“meta refresh”标签,间隔为“0”秒。因为,在该页面中禁用了JavaScript,浏览器被重定向到“ShowErrorPage.html”以显示一些警告消息。

我希望这会对你有所帮助。

答案 1 :(得分:8)

你是对的<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>

答案 2 :(得分:7)

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

不是一个好的解决方案,因为IE11(和之前的版本)有一个安全选项,当设置为&#39; high&#39;禁用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> 

答案 3 :(得分:3)

<noscript>适用于此类事情,就像<script>适用于JS一样。请注意使用元标记刷新:

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

意味着可以通过增加Internet选项安全性(可能首先用于禁用JS)在IE(至少IE10)中轻松禁用它。当安全设置增加时,“允许META REFRESH”选项被禁用。

答案 4 :(得分:1)

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

答案 5 :(得分:0)

您可以使用stackoverflow使用的相同方法。看我的jsfiddle链接。当Javascript被禁用时,在第一个noscript块中,在body标签之后,你去添加一个padding-top到一个空子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;
         }