<noscript>と反対のHTMLはありますか？

106

JavaScriptが有効になっている場合にのみコンテンツを表示するタグがHTMLにありますか？私<noscript>はJavaScriptがオフになっているときにHTMLコンテンツを表示するという逆の方法で動作することを知っています。ただし、JavaScriptが利用可能な場合にのみフォームをサイトに表示し、フォームがない場合はフォームを使用できない理由を伝えたいと思います。

これを行う方法を知っている唯一のdocument.write();方法は、scriptタグ内のメソッドを使用することであり、大量のHTMLの場合は少し面倒です。

javascript html noscript

— ない
ソース

56

ページが読み込まれたときにJavaScriptを介して表示される非表示のdivを持つことができます。

— セジャヨス
ソース

217

私が考えることができる最も簡単な方法：

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

document.write、スクリプト、純粋なCSSはありません。

— 意志
ソース

11

少なくともxhtml標準では許可されていません。

— Dykam 2009

29

@Dykam：HTML5：dev.w3.org/html5/spec/Overview.html#the-noscript-elementで許可されており、実際には、ほぼすべてのブラウザーでサポートされています。

— ウィル

3

display: none !importantスクリプトが有効になっているときに使用することを目的とした、より具体的なルール（idまたはcssセレクターなど）によってオーバーライドされないようにするには、を使用することをお勧めします。

— イスタドール2015

3

警告：現在のバージョンのChrome <noscript>では、環境設定でJavaScriptを無効にした後で初めてページを更新したときに、内部のタグが解析されません。リロードするには、リロードを2回押す必要があります。

— トビア2015

2

クリーンで簡潔、JavaScriptを使用しない。私はそれが好きです。

— Dragas

8

HTMLを事前に埋め込み、CSSで非表示にすることについてのここでのすべての回答に同意しません。JavaScriptが有効になっていない場合でも、そのノードはDOMに存在します。確かに、ほとんどのブラウザー（アクセシビリティブラウザーを含む）はそれを無視しますが、それでも存在し、あなたに噛み付くように戻ってくる奇妙な時があるかもしれません。

私が好む方法は、jQueryを使用してコンテンツを生成することです。大量のコンテンツになる場合は、HTMLフラグメントとして保存し（表示するHTMLだけで、html、body、headなどのタグはなし）、jQueryのajax関数を使用して、全ページ。

test.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_test.html

<p>This is from an HTML fragment document</p>

結果

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>

— クリスブルーム
ソース

8

まず第一に、常に別々のコンテンツ、マークアップ、および動作です！

これで、jQueryライブラリを使用している場合（実際に使用すると、JavaScriptが大幅に簡単になります）、次のコードで実行できます。

$(document).ready(function() {
    $("body").addClass("js");
});

これにより、JSが有効になっているときに本体に追加のクラスが提供されます。これで、CSSで、JSクラスが使用できないときに領域を非表示にし、JSが使用できるときに領域を表示することができます。

または、no-jsデフォルトのクラスとしてbodyタグに追加して、次のコードを使用することもできます。

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

CSSが無効になっていても表示されることに注意してください。

— アレクサンダーパス
ソース

3

単純で柔軟な解決策がありますが、ウィルズに多少似ています（ただし、有効なhtmlであるという追加の利点があります）。

body要素に「jsOff」のクラスを与えます。これをJavaScriptで削除（または置き換え）します。「jsOnly」のクラスを持つ要素を「jsOff」のクラスを持つ親要素とともに非表示にするCSSを用意します。

つまり、JavaScriptが有効になっている場合、「jsOff」クラスは本体から削除されます。これは、「jsOnly」のクラスを持つ要素には「jsOff」のクラスを持つ親がないため、それらを非表示にするCSSセレクターと一致しないため、それらが表示されることを意味します。

JavaScriptが無効になっている場合、「jsOff」クラスは本体から削除されません。「jsOnly」を持つ要素がします「jsOff」と親を持っているので、します皮革、それらを、このように彼らは非表示になりますことをCSSのセレクタに一致します。

これがコードです：

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff','jsOn');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

有効なhtmlです。簡単です。柔軟性があります。

JSが有効な場合にのみ表示する要素に「jsOnly」クラスを追加するだけです。

「jsOff」クラスを削除するJavaScriptは、bodyタグ内でできるだけ早く実行する必要があることに注意してください。bodyタグはまだないので、それ以前に実行することはできません。「jsOnly」クラスの要素はすぐには表示されない可能性があるため、後で実行しないでください（「jsOff」クラスがbody要素から削除されるまで、それらの要素を非表示にするCSSセレクターと一致します）。

これは、jsのみのスタイリング（例.jsOn .someClass{}）とno-jsのみのスタイリング（例.jsOff .someOtherClass{}）のメカニズムも提供します。これを使用して、次の代替手段を提供できます<noscript>。

.jsOn .noJsOnly{
    display:none;
}

— スパイチョ
ソース

1

JavaScriptを使用して、別のソースファイルからコンテンツをロードし、出力することもできます。それはあなたが探しているよりも少しブラックボックスかもしれません。

— TheSmurf
ソース

1

非表示のdiv方法の例を次に示します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

（おそらく、貧弱なIEの場合は微調整する必要がありますが、アイデアはわかります。）

— シャドウ2531
ソース

1

私の解決策

.css：

.js {
display: none;
}

.js：

$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});

.html：

<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>

— prgDevelop
ソース

HTMLの例では、</ span>で行を終了したくないですか？

— 2013

0

Alexの記事はここで思い浮かびますが、ASP.NETを使用している場合にのみ該当します。JavaScriptでエミュレートできますが、ここでもdocument.write（）;を使用する必要があります。

— ロス
ソース

0

段落| divの表示を「非表示」に設定できます。

次に、「onload」関数で、可視性を「visible」に設定できます。

何かのようなもの：

<body onload = "javascript：document.getElementById（rec）.style.visibility = visible"> <p style = "visibility：visible" id = "rec">このテキストは、JavaScriptが利用可能でない限り非表示にします。</ p>

0

そのためのタグはありません。テキストを表示するには、JavaScriptを使用する必要があります。

一部の人々はすでに、JSを使用してCSSを動的に表示するように設定することを提案しています。document.getElementById(id).innerHTML = "My Content"ノードを使用して動的にテキストを生成したり、ノードを動的に作成したりすることもできますが、CSSハックはおそらく最も簡単に読むことができます。

— cpm
ソース

0

この質問が行われてから10年で、HIDDEN属性がHTMLに追加されました。CSSを使用せずに要素を直接非表示にすることができます。CSSベースのソリューションと同様に、要素はスクリプトで非表示にする必要があります。

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>

— チャック
ソース