web-dev-qa-db-ja.com

javascriptが無効になっているときにコンテンツを非表示にするために<noscript>タグをラップする方法

たとえば、次のようなHTMLコードがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
This is content.
</body>
</html>

そして、そこに<noscript>タグを追加したいと思います。つまり、JavaScriptが無効になっている場合は、空白のページとして表示されます。

また、JavaScriptが無効になっている場合にのみ、「これはコンテンツテキストです」と表示されます。

達成するためのいくつかの例を教えてください。ありがとう。

noscript
23
Mikeos78

Rahulによって提案されたJSアプローチの代替手段は、ページ全体をカバーする<noscript>要素にdivを表示することです。

<noscript>
    <div style="position: fixed; top: 0px; left: 0px; z-index: 3000; 
                height: 100%; width: 100%; background-color: #FFFFFF">
        <p style="margin-left: 10px">JavaScript is not enabled.</p>
    </div>
</noscript>
53
Dan Alvizu

すべてのコンテンツをdisplaynoneでメインdiv内にラップし、onload関数で表示をブロックに変更します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>
<body>
  <div id="divMain" style="display: none">
    This is content.
  </div>
<noscript>
  JS not enabled
</noscript>
<script>
  document.getElementById("divMain").style.display = "block";
</script>
</body>
</html>
22
rahul

noscriptタグは逆に機能します。スクリプトが有効になっているときにコンテンツを表示するには、非表示の要素にコンテンツを配置し、スクリプトを使用して表示します。

<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>
5
Guffa

スタイルタグとメタリフレッシュの両方がnoscript内で機能します：

<noscript>

<style>body { display:none; }</style>

<meta http-equiv="refresh" content="0; url=blankpage.html">

</noscript>

最初の行には現在のページが表示されますが、空です。 2行目はにリダイレクトされます blankpage.html

2
Sebastian H

私は非常に問題がありました：

Javascriptが有効になっているときにサイト全体を表示したかったのです。ただし、javascriptが無効になっている場合は、「このサイトにはjavascriptが必要です...」というメッセージを表示するだけでなく、ヘッダーとフッター（header.incとfooter.incにあります。私のサイトの各コンテンツページ）（見栄えがする）。言い換えれば、私は自分のサイトのメインコンテンツ領域を置き換えるだけでした。これが私のhtml/cssソリューションです：

Header.incファイル（場所は重要ではありません）：

<noscript>
    <style>
        .hideNoJavascript {
            display: none;
        }  
        #noJavascriptWarning {
            display: block !important;
        }
    </style>
</noscript>

ヘッダーファイル（下）：

<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div>
<div class="container-fluid hideNoJavascript">
<!-- regular .php content here -->

CSSファイル：

#noJavascriptWarning {
    color: #ed1c24;
    font-size: 3em; 
    display: none;  /* this attribute will be overridden as necessary in header.inc */
    text-align: center;
    max-width: 70%;
    margin: 100px auto; 
}

要約すると、「javascriptが必要です」というメッセージは、デフォルトのCSSルールに従って非表示になっています。ただし、ブラウザがタグを解析すると、デフォルトのルールが上書きされ、メインコンテンツが非表示になり（ヘッダー/フッターを除くすべて）、JavaScriptメッセージが表示されます。完璧に動作します...私のニーズに合わせて！うまくいけば、他の誰かがこれが役に立つと思うでしょう:-)

JavaScriptを有効/無効にした2つのスクリーンショットを次に示します。

enter image description here

enter image description here

2
psterling

あなたは次のようなことをすることができます

<body id="thebody">
  this is content.
  <script>
    document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!";
  </script>
</body>
1
Alex Martelli