小粋空間  -  a cheap joke and a play on words site

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

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

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

１．はじめに

HTMLのscript要素で

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

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

<script>
foo = 1;
</script>

という風に、要素のコンテンツを記述する場合があると思いますが、外部スクリプトの読み込みとを要素のコンテンツの記述を同時に行った場合について、仕様と実装の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>

３．実装

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

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

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

alert("OK1");

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

alert("OK2");

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

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

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