script要素に外部スクリプトとコンテンツは併用できるのか調べてみた

script要素に外部スクリプトとコンテンツは併用できるのか調べてみた

Posted at May 23,2016 12:03 AM
Tag:[HTML]

script要素で、外部スクリプト読み込みと要素のコンテンツが併用できるのか調べてみました。

認識誤り等あればご指摘ください。

1.はじめに

HTMLのscript要素で

<script src="http://user-domain/foo.js"></script>

という風に、外部スクリプトを読み込む場合と、

<script>
foo = 1;
</script>

という風に、要素のコンテンツを記述する場合があると思いますが、外部スクリプトの読み込みとを要素のコンテンツの記述を同時に行った場合について、仕様と実装の2つの観点で調べてみました。

2.仕様

HTML5の仕様「4.11.1.3 Inline documentation for external scripts」では、src属性を指定した場合、コメントのみを許容しているように読み取れます。

If a script element's src attribute is specified, then the contents of the script element, if any, must be such that the value of the text IDL attribute, which is derived from the element's contents, matches the documentation production in the following ABNF, the character set for which is Unicode.

ここでの記載は割愛していますがBNFも掲載されていて、コメントのみが許容されているようです。

下記の記述はOKということらしいです。

<script src="cool-effects.js">
 // create new instances using:
 //    var e = new Effect();
 // start the effect using .play, stop using .stop:
 //    e.play();
 //    e.stop();
</script>

3.実装

念のため、簡単なスクリプトでブラウザの実装も確認してみました。

確認ブラウザはGoogle Chromeです。

外部スクリプトfoo.jsで下記のalertを実行します。

alert("OK1");

script要素のコンテンツでは下記のalertを実行します。

alert("OK2");

要するに、下記のscript要素でどういう振る舞いになるかを確認してみました。

<script src="foo.js">
alert("OK2");
</script>

結果は「OK1」が表示、つまり"foo.js"のスクリプトのみ実行されました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)