script要素にsrc属性とインラインスクリプトの両方があると？

Tweet

Category JavaScript 2012/06/14

問題

これは普通ですよね。

<script type='text/javascript' src='/path/to/script.js'></script>
<script type='text/javascript'>
    alert('ここに書いたインラインスクリプトは実行されるのが普通のはず');
</script>

こうするとどうなります？

<script type='text/javascript' src='/path/to/script.js'>
    alert('src属性のあるscript要素の中のインラインスクリプトは？');
</script>

答え

HTML4では、script要素のsrc属性にURIが指定されていれば、インラインスクリプトは無視して、URIから外部jsを取得しなくてはならない。

http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1

The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element’s contents and retrieve the script via the URI.

HTML5でも、script要素にsrc属性がある場合、要素の中身は空であるか、制約を満たすドキュメントだけを含むことができる。

http://www.w3.org/TR/html5/the-script-element.html#the-script-element

If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

ということで、実行されないのが正しいはず。

さらに問題

google+ で、気になる書き方を見たのですが、どうなってるんですか、これ。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {"parsetags": "explicit"}
</script>

答え？

script要素の中に書かれた文字を取得して、json文字列として評価しているようです。

try{f=(new Function("return ("+e+"\n)"))()}catch(k){} などしている箇所で、eの中身を確認してみると、script要素の中身を取ってきています。

インラインスクリプトとして実行されているわけではないようです。

使う側にはシンプルできれいに見えるものの、いい実装なのか気になる書き方です。