web-dev-qa-db-ja.com

noscriptタグを使用してクライアント側でJavaScriptが無効になっている場合にメッセージを表示する

JavaScriptがクライアント側で無効になっている場合、メッセージにフラグを立てたいです。ここで検索して<noscript>このものを処理するために使用するタグ。

W3schoolsエディターでこれを確認して確認しましたが、機能していないので、この<noscript>は、この部分または私がこの部分で欠落している何かのためのものではありませんか？

enter image description here

javascriptnoscript
17
Trialcoder

これを試して ：-

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には「meta refresh」という名前のメタタグがあり、そのヘッダーで指定された間隔でユーザーを別のページにリダイレクトします。

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

上記のコードはnoscript内にあるので、間隔が「0」秒の「メタ更新」タグがあります。そのページでJavaScriptが無効になっているため、ブラウザーは「ShowErrorPage.html」にリダイレクトされ、警告メッセージが表示されます。

これがお役に立てば幸いです。

39
Rubyist

正しい。 <noscript>タグは、JavaScriptが無効になっている場合にのみ表示されます。 これをテストするにするには、次の手順を実行します。

  • このスニペットをファイル「test.html」に保存します。
  • ブラウザで開きます。
  • JavaScriptを有効/無効にします（FireFoxでは、これはTools/Options/Content/Enable JSです）。

ご覧のとおり、ページの本文内に配置する<noscript>タグ内にany 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>
9
jensP
<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>
7
frank

<noscript>は、<script>はJS用です。メタタグの更新を使用することに注意してください。

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

これは、IE（少なくともIE10）で、インターネットオプションセキュリティ（おそらく最初にJSを無効にするために使用された可能性が高い）によって簡単に無効になります。）セキュリティ設定が増加すると無効になります。

3
RickL

「サポートしない」メッセージをdivに配置し、JavaScriptを使用して、ページが読み込まれたときにdivを非表示にします

1
thesimm

Stackoverflowで使用されるのと同じ方法を使用できます。私のjsfiddleリンクを参照してください。 JavaScriptが無効になっている場合、bodyタグの直後の最初のnoscriptブロック内で、空の子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;
         }
0
JB-Franco