javascript - 書く - script タグ body 外




自己クローズスクリプトタグが機能しないのはなぜですか? (8)

ブラウザが正しく認識しない理由は何ですか?

<script src="foobar.js" /> <!-- self-closing script tag -->

これだけが認識されます:

<script src="foobar.js"></script>

これはXHTMLサポートの概念を破っていますか?

注:このステートメントは、少なくともすべてのIE(6-8ベータ2)に対して正しいです。


これは、SCRIPT TAGがVOID ELEMENTではないためです。

HTML文書では 、VOID要素に 「終了タグ」 はまったく必要ありません

xhtmlではすべてがGenericなので、それらはすべて "終了タグ"などの終了が必要です。 br、簡単な改行を含む、 <br></br>またはその省略形 <br />

しかし、スクリプト要素は、何よりも前のスクリプトタグがデータ記述宣言ではなくブラウザ命令であるため、無効要素またはパラメトリック要素となることはありません。

基本的に、セマンティクス終了命令、例えば「終了タグ」は、後続のタグによってセマンティクスを終了できない命令を処理するためにのみ必要とされる。 例えば:

<H1>セマンティクスは、それ自身のセマンティクスがオーバーライドするのに十分ではないため、前のH1命令セットを終了するため、次の<P>で終了できません。 ストリームを新しい段落行に分割することはできますが、現在のフォントサイズとスタイル行の高さをオーバーライドしてストリームを流すことはできません。つまり、H1から漏れます (Pにはそれがないため)。

これは「/」(終端)シグナリングが発明された理由とその理由です。

< />ような一般的なno-description終了タグは、 <H1>Title< /> 、遭遇したカスケードを一度落とすだけで十分です。しかし、必ずしもそうではありません。 "、ストリームの多重仲介タグ付け:別のカスケードに折り返し/落下する前に急流に分割。 結果として、 < />ような一般的なターミネータは、終了するプロパティのターゲットを特定することができません。 たとえば、 <b> 太字 <i> 太字斜体 < /> イタリック </>です。 間違いなく私たちの意図を正しく守ることができず、 大胆な太字のイタリック体の太字であると大抵は解釈するでしょう。

これは、ラッパー、すなわちコンテナという概念がどのようにして生まれたかです。 (これらの概念は非常に似ているため、識別することは不可能であり、時には同じ要素が両方を持つこともあります。 <H1>は同時にラッパーとコンテナの両方ですが、 <B>は意味ラッパーのみです)。 我々は、セマンティクスのないプレーンなコンテナが必要です。 もちろん、DIV要素の発明は来ました。

DIV要素は実際には2BRコンテナです。 もちろん、CSSが登場して以来、全体の状況は他の方法よりも奇妙になり、間違いなく多くの大きな結果と大きな混乱が生じました。

CSSを使用すると、新しく作成されたDIVのBRの動作前と後のネイティブのプリプリを簡単にオーバーライドすることができるため、「何もしないコンテナ」と呼ばれることがよくあります。 自然に間違っているのはどちらですか? DIVはブロック要素であり、エンドシグナリングの前と後の両方でストリームのラインをネイティブに破ります。 まもなくWEBはページDIV-itisに苦しみ始めました。 それらのほとんどはまだあります。

HTMLタグのネイティブ動作を完全にオーバーライドして完全に再定義する機能を備えたCSSの登場は、何とかHTMLの存在の意味を混乱させ、ぼやけさせてしまいました...

突然、すべてのHTMLタグはまるで時代遅れのように現れ、壊れてしまい、元の意味、アイデンティティ、目的がすべて取り除かれました。 どういうわけか彼らはもはや必要ではないという印象を得るでしょう。 言う:単一のコンテナラッパータグは、すべてのデータプレゼンテーションで十分です。 必要な属性を追加するだけです。 なぜ意味のあるタグを持たないのでしょうか。 あなたが行くにつれてタグ名を描き、残りの部分でCSSが気になるようにしましょう。

これはxhtmlが生まれた経緯と、もちろん、偉大な鈍さです。これは、新しい人と、何が何の歪んだビジョンなのか、そしてそのすべての目的が何であるかということです。 W3CはWorld Wide Webから何が間違っていたのか、同志たちになったのか?

HTMLの目的は、意味のあるデータを人間の受信者に流すことです。

情報を提供する。

正式な部分は、情報配信の明快さを助けるだけです。 xhtmlは情報に少しでも配慮するものではありません。 - それには、情報は絶対に無関係です。

この問題の最も重要なことは、 xhtmlが単なる拡張されたHTMLのバージョンではないことを知り、理解できることです.xhtmlはまったく別の獣です。 挽回する。 従ってそれらを別々に保つことが賢明です。


Bradとsquadetteが言っていることに加えて、自己終了XML構文<script />実際に正しいXMLですが、実際に動作させるためには、あなたのWebサーバーは文書をXML mimetype HTTP Content-Typeヘッダーのapplication/xhtml+xmltext/htmlではなく)と同じtext/html

しかし、XML mimetypeを送ると、あなたのページはtext/htmlだけが好きなIE7によって解析されなくなります。

w3から:

要約すると、 'application / xhtml + xml'はXHTMLファミリ文書に使用されるべきであり、 'text / html'の使用はHTML互換のXHTML 1.0文書に限定されるべきである(SHOULD)。 'application / xml'と 'text / xml'も使用できますが、適切な場合には汎用XMLメディアタイプではなく 'application / xhtml + xml'を使用するべきです(SHOULD)。

私は数ヶ月前にこれに戸惑っていましたが、FF3 +とIE7と互換性のある唯一の実行可能なソリューションは、 text/html (HTML構文+ HTML mimetype)で古い<script></script>構文を使用することでした。

あなたのサーバがHTTPヘッダーでtext/html型を送信していれば、正しく整形されたXHTML文書であってもFF3 +はそのHTMLレンダリングモードを使用します。つまり、 <script />は動作しません。 )。

これは、 http-equivメタタグ、ドキュメント内のXMLプロローグまたはdoctypeの操作に関係なく発生します.Firefoxは、 text/htmlヘッダーを取得すると分岐し、HTMLパーサーまたはXMLパーサーがドキュメントを参照するかどうかを決定します。 HTMLパーサーは<script />認識しません。


Internet Explorer 8以前では、XHTMLの解析がサポートされていません。 XML宣言および/またはXHTML doctypeを使用しても、古いIEはその文書をプレーンなHTMLとして解析します。 普通のHTMLでは、自己閉じ構文はサポートされていません。 末尾のスラッシュは無視されます。明示的な終了タグを使用する必要があります。

IE 9以降などのXHTML解析をサポートするブラウザでも、XMLコンテンツタイプでドキュメントを提供しない限り、HTMLとして解析されます。 しかし、その場合、古いIEはドキュメントをまったく表示しません!


XHTML 1仕様によると:

С.3。 要素の最小化と空要素の内容

コンテンツモデルが空ではない要素の空のインスタンス(たとえば空のタイトルや段落など)は、最小化されたフォームを使用しないでください( <p> </p>ではなく<p /> )。

XHTML DTDはスクリプトタグを次のように指定します。

<!-- script statements, which may include CDATA sections -->
<!ELEMENT script (#PCDATA)>

scriptタグにはインラインコードが含まれている可能性があり、HTMLは属性の存在に基づいてその機能をオンまたはオフにするほどスマートではないため、自己終了スクリプトタグは機能しません。

一方、HTMLには、外部リソースへの参照を含めるための優れたタグがあります。これは<link>タグであり、自己終了することができます。 これは既にスタイルシート、RSSとAtomフィード、標準URI、その他のさまざまなグッズを含めるために使用されています。 なぜJavaScriptはありませんか?

スクリプトタグを自分で囲むには、私が言ったようにそれをすることはできませんが、スマートな方法ではありませんが、代わりがあります。 自己閉鎖リンクタグを使用してJavaScriptにリンクするには、テキスト/ javascriptのタイプとスクリプトとしてのrelを指定します。

<link type="text/javascript" rel ="script" href="/path/tp/javascript" />

「真のXHTML」と「偽XHTML」とHTMLの違いと、サーバが送信するMIMEタイプの重要性についてはすでによく説明されています。 今すぐ試してみたい方は、シンプルな編集可能なスニペットを使用して、可能なブラウザ用の自己クローズドスクリプトタグを含むライブプレビューを表示してください:

div { display: flex; }
div + div {flex-direction: column; }
<div>Mime type: <label><input type="radio" onchange="t.onkeyup()" id="x" checked  name="mime"> application/xhtml+xml</label>
<label><input type="radio" onchange="t.onkeyup()" name="mime"> text/html</label></div>
<div><textarea id="t" rows="4" 
onkeyup="i.src='data:'+(x.checked?'application/xhtml+xml':'text/html')+','+encodeURIComponent(t.value)"
><?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[<!ENTITY x "true XHTML">]>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
  <p>
    <span id="greet" swapto="Hello">Hell, NO :(</span> &x;.
    <script src="data:text/javascript,(g=document.getElementById('greet')).innerText=g.getAttribute('swapto')" />
    Nice to meet you!
    <!-- 
      Previous text node and all further content falls into SCRIPT element content in text/html mode, so is not rendered. Because no end script tag is found, no script runs in text/html
    -->
  </p>
</body>
</html></textarea>

<iframe id="i" height="80"></iframe>

<script>t.onkeyup()</script>
</div>

Hello, true XHTML. Nice to meet you! Hello, true XHTML. Nice to meet you! テキストエリアの下。

不可能なブラウザの場合は、テキストエリアの内容をコピーして.xhtml (または.xht )拡張子のファイルとして保存することができます( このヒントについてはAlekに感謝します )。


他の人は「方法」と引用仕様に答えました。 何時間もバグレポートやメーリングリストを掘り下げた後、 " <script/>ない理由"の実際の話があります。

HTML 4

HTML 4はSGML基づいています。

SGMLには、 <B>text</><B/text/ 、または<OL<LI>item</LI</OL>などのいくつかのshorttags <B>text</> 。 XMLは最初の形式をとり、エンディングを ">"(SGMLは柔軟性がある)として再定義し、 <BR/>になります。

しかし、HTMLはレッドファイン化しなかったので、 <SCRIPT/> <SCRIPT>> <SCRIPT/> 意味するはずです。
(はい、 '>'はコンテンツの一部でなければなら 、タグはまだ閉じられていません )。

明らかに、これはXHTMLとの互換性がなく、多くのサイト壊れてしまいます(ブラウザがこれ を気にするほど成熟した頃には)、 誰もショートタグを実装していないので、仕様書にはそのことについて助言があります

効果的には、すべての「動作中の」自己終了タグは、技術的に不適合なパーサー上にオプションの終了タグを持つタグであり、実際は無効です。 これはW3Cであり、 HTML-compatibleせてXHTMLへの移行を助けるためにこのハック思いつきました

また、 <script>の終了タグはオプションではありません

「自己終了」タグはHTML 4のハックであり、無意味です。

HTML 5

HTML5には5種類のタグがあり、「空」タグと「外国」タグだけが自己閉鎖することできます。

<script>はvoidではなく(内容があるかもしれない)、外国語ではない(MathMLやSVGなど)ので、 <script>はどのように使用するかにかかわらず、自己クローズできません。

しかし、なぜ? 外国人と見なすことはできませんか?

HTML 5は、HTML 4とXHTML 1の実装とのbackward-compatibleを目指しています。これはSGMLまたはXMLに基づいていません。 その構文は、主に実装の文書化と統合に関するものです。 (これは、無効なHTML4であるにもかかわらず、 <hr/>などが有効なHTML 5である理由です)。

自己終了型<script>は、実装が異なっていたタグの1つです。 以前はChrome、SafariOperaで動作していましたが 、 それは私の知る限り、Internet ExplorerやFirefoxで動作しませんでした。

これは 、HTML5が起草され、 browser compatibilityが損なわれて却下されたときに議論されました。 スクリプトタグを自動的に閉じるWebページは、古いブラウザでは正しく表示されないことがあります。 他の提案もありましたが、互換性の問題も解決できません。

ドラフトがリリースされた後、WebKitはパーサーが適合しているように更新しました。

HTML 5では、HTML 4とXHTML 1との下位互換性のため、自己クローズ<script>は起こりません。

XHTML 1 / XHTML 5

実際に XHTMLとして提供されたとき、 <script/>は本当に閉じられています。

スペックが HTMLとして提供されたときに動作するはずだった ということを除いて:

XHTML Documents ...は、ほとんどのHTMLブラウザと互換性があるため、インターネットメディアタイプ "text / html" [RFC2854]でラベル付けされています。

どうしたの?

Firefox は、Mozillaに、指定されたコンテンツヘッダー( コンテンツスニッフィングと呼ばれる)に関係なく、 XHTMLとして適合する文書を解析させる ように頼んだ 。 これにより、自己クローズスクリプトが可能になりました。ウェブホスティング業者が正しいヘッダーを提供できるほど成熟していないため、コンテンツスニッフィングが必要でした。 IEはうまくいきました

最初のブラウザ戦争がIE 6で終わっていない場合、XHTMLもリストに載っている可能性があります。 しかし、それは終わりました。 IE 6 XHTMLに問題があります。 実際、IE 正しいMIMEタイプ サポートしいないため 、IE XHTMLにtext/htmlを使用しなければなり ませんでした。なぜなら、IE 10年にわたって大きな市場シェア持っていたからです。

また、コンテンツスニッフィング 本当に悪い ことがあり、人々はそれを止めるべきだと言っています

最後に、W3C はXHTMLがスニファブルであることを意味していないことが判明しました。文書はHTMLとXHTMLの両方であり、 Content-Typeルールです。 彼らは「私たちの仕様にちょうど従う」ことを確信し、実用的なもの無視していると言うことができます。 間違いcontinued 、後のXHTMLバージョンにcontinuedました。

とにかく、この決定はFirefox の問題解決しました 。 クロムが生まれたのは7年前だった 。 その他の重要なブラウザはありませんでした。 こうしてそれが決定された。

doctypeだけを指定しても、以下の仕様のためにXML解析が開始されることはありません。


誰かが興味をそそられている場合、最終的な理由は、HTMLがもともとSGMLの方言であったということです。これはXMLの奇妙な兄です。 SGML-landでは、DTD内でタグをself-closing(BR、HR、INPUTなど)、暗黙的に閉じる(P、LI、TDなど)、明示的に閉じることができます(TABLE、DIV、SCRIPTなど)。 もちろん、XMLにはこれの概念がありません。

現代のブラウザで使われているタグスープパーサは、このパーザーモデルがもはや純粋なSGMLではありませんが、この遺産から発展しました。 もちろん、注意深く作成されたXHTMLは、XML mimeタイプで送信しない限り、ひどく書かれたSGML風のタグスープとして扱われます。 これも理由です...

<p><div>hello</div></p>

...ブラウザによって解釈される:

<p></p><div>hello</div><p></p>

...これは、あなたがDOMに対してコードを作成しようとするときにあなたを納得させることができるかわいいあいまいなバグのレシピです。





xhtml