<script>タグはいつ表示する必要があり、なぜ表示できるのですか？

142

表示されるようにscriptスタイル設定された要素display:block。なぜそれが可能であり、それが望まれる実際のユースケースがあるのですか？

td > * {
  display: block;
}

<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>

スニペットを展開

html css script-tag

— Wutzebaer
ソース

55

<style>コンテンツが編集可能なCSS を目にしました。リアルタイムで効果を確認するための素晴らしい方法。

— John Dvorak

19

次の課題では、コメントを表示する方法を考案します。

— リスター氏2016

11

同じことを言うためにここに来ました、@ JanDvorak。私が初めて見たとき、私の分を吹き飛ばしました。私はコードペン

— Kjeld Schmidt

6

ことを思い出すドーン踏むの航海ルーシーはアスランが目に見えるように呪文を読み込み、彼女は魔法が影響を与えることに驚いていますときに彼を、彼は基本的に言う、あなたは私は自分のルールに背くと思いましたか？

— デビッドコンラッド

4

これは基本的な質問だと思ってここに来て、何か新しいことを学びました。私<3 sof。

— Jacksonkr 2016

104

HTML5仕様は、ユーザーエージェント（ブラウザーなど）が使用すると想定されるスタイルシートを定義しています。セクション10.3.1に、「非表示要素」のスタイルを示します。

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

ご覧のとおり、に適用さdisplay: none;れscriptます。

これは、ユーザーと非表示script要素の間の唯一の「障壁」です。これは完全に問題なく、オーサースタイルシート内のユーザーエージェントスタイルシート（およびもちろんユーザースタイルシート内）のスタイルを上書きできるようになっています。

なぜ誰かがそれを使いたいのでしょうか？1つの使用例は、古い要素と同様に、/などの文字をエスケープせずにコンテンツを表示すること<>xmpです。script要素には、スクリプトの、だけでなく、使用することができ、データ・ブロックのために（すなわち、MIMEタイプを使って何のために）。

— unor
ソース

データはすでにコード化されている<script>必要があります-データブロックはによってロードできませんsrc。

@PauliSudarshanTerho：はい、データブロックとして使用する場合、src属性はscript要素で許可されません。

— unor

71

<script>タグが表示されるのはなぜですか？

これらは他の要素と同様にHTML要素であり、CSSがそれらに適用されないようにするために、HTML仕様に（複雑さを追加する）特別なケースのルールを記述する理由はありません。

どの要素もスタイルを設定できます。例えば：

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

必要なユースケースはありますか？

確かに一般的なものはありませんが、一般的なルールは、それらを適用できるすべてのものに対して意味をなすようには設計されていません。彼らは一般的なケースのために設計されています。

— クエンティン
ソース

9

実際、Chromeインスペクターでスクリプトタグを見ると、次のように見えますuser agent stylesheet: script {display:none}

— Niet the Dark Absol

8

「他と同じようにDOM要素」を作成します。実際、これらは解析ルールを備えた非常に特殊なHTMLタグです。

— ベルギ

2

おもしろい事実：スクリプトの内容はCDATAとして解析されるため、以前と<script type="text/plain">同じように使用できますが<xmp>、W3Cバリデーターとの互換性は維持されます。

— リスター氏2016

2

script {display: block !important;}特別なケースルールがないのになぜ機能しないのですか？

— wutzebaer 2016

3

@wutzebaerそれは私にとってはうまくいきます。あなたはすべてを正しく行っていますか？scriptタグは可視要素にも含まれている必要があることに注意してください。scriptたとえばhead、デフォルトではなく、本体のみが表示されます。

— Luaan

36

別の（一般的ではない）使用例：

<script>スタイルガイドの簡単なHTMLコード例にタグを使用することがあります。これにより、HTMLタグや特殊文字をエスケープする必要がなくなります。また、テキストエディタータグのオートコンプリートと構文の強調表示も機能します。ただし、ブラウザで構文の強調表示を追加する簡単な方法はありません。

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>

スニペットを展開

— jfrej
ソース

2

悪くはありませんが、有効なMIME-type：text/htmlを使用class="codesample"し、スタイルを適用するようなものを使用することをお勧めします。見慣れた理由でのみ：D

— Niet the Dark Absol

5

@NiettheDarkAbsol：一部のブラウザが何らかの方法でそのタイプのスクリプト要素を解析および実行することを決定した場合に備えて、「実際の」MIMEタイプ（または将来1つになる可能性のあるもの）を使用しないほうが安全です。とは言ってもx-、カスタムタイプには標準のプレフィックスを使用したいのtext/x-exampleです。

— Ilmari Karonen 16

14

可能な使用例：デバッグ目的。

たとえば、ドキュメントレベルでクラスを適用できます。<body class="debugscript">、次にいくつかのCSSを使用します。

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}

— ニート・ザ・ダーク・アブソル
ソース

1

なんで<html class="debugscript">？

— ベルギ

@Bergiこれもオプションですが、<head>スクリプト<head>自体は表示されないため、スクリプトを表示しない可能性がありdisplay:noneます。強制的に表示する必要があるため、さらに複雑になる可能性があります。

— Niet the Dark Absol

10

「もっと楽しい」または「さらにデバッグの可能性」を意味します:-)

— Bergi

1

スクリプトタグは、デフォルトではを使用して非表示になっていますdisplay:none;。Unor ¹は、基礎となる言語仕様を説明しています。ただし、これらは引き続きDOMの一部であり、それに応じてスタイルを設定できます。

とはいえ、スクリプトタグの機能を正確に覚えておくことが重要です。以前はタイプと言語が付随していたが、それはもはや必要ではない。これで、JavaScriptがそこにあると想定され、結果として、ブラウザーはこれらのタグから出会った（またはロードされた）スクリプトを解釈して実行します。

スクリプトが実行されると、タグのコンテンツはページ上のテキストのみ（多くの場合非表示）になります。このテキストは明らかにできますが、単なるテキストであるため削除することもできます。

ページの下部、終了</html>タグの直前で、これらのタグとテキストを簡単に削除でき、ページは変更されません。

例えば：

(function(){
    var scripts = document.querySelectorAll("script");
    for(var i = 0; i < scripts.length; i++){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
})()

ページの状態は既に変更されており、現在のグローバル実行コンテキストに反映されているため、これによって機能が削除されることはありません。たとえば、ページにjQueryなどのライブラリが読み込まれている場合、タグを削除しても、jQueryは既にページのランタイム環境に追加されているため、jQueryが公開されなくなったことにはなりません。それは本質的にDOM検査ツールにスクリプト要素を表示させないだけですが、一度実行されたスクリプト要素が本当にテキストのみであることを強調しています。

_{1. unor、木2016年7月7日、wutzebaer、「タグをいつ表示すべきか、なぜタグを表示できるのか」、7月1日10 ： 53、https： //stackoverflow.com/a/38147398/1026459}

— トラビスJ
ソース