【Javascript】onclick=”javascript: ～～” って意味あるの？

Tweet

Category JavaScript 2012/06/12

問題

古いプログラムに、こんな記述を見つけました。

この「javascript:」に、意味はあるのでしょうか？？？

あっても動くし、なくても動くし……

<select onchange="javascript: shori();">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

答え

ほぼ意味がないし、本来の機能を発揮していないと思う。

URLを書くべき場所に登場する javascript:は、URLスキームである

http://www.w3.org/TR/html5/webappapis.html#javascript-protocol

以下のような形で、昔からよく見られたものです。

クリックしてください

<a href="javascript: alert('hello!!');">クリックしてください</a>

これら↓の仲間と思ってよい（data URL スキームはこちら参照）。

<a href="http:～～" ...
<iframe src="https:～～" ...
<img src="data:～～" ...

Javascriptを書いてよい場所に登場する javascript: は、ラベル付き文である

http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/12_Statements.html#section-12.12

12.12 ラベル付き文 (Labelled Statements)

Syntax

LabelledStatement :
        Identifier : Statement

Semantics

Statement にラベルを先行させてよい。ラベル付き文は、ラベル付き break 及び continue 文とともに使用されるだけである。 ECMAScript は goto 文を持たない。

問題の「onchange=”javascript:～”」の書き方は、仕様書にあるとおり、構文的に間違っていないのでエラーとはならない。

しかし、ラベル付き文は break や continue とともに使う場合しかなく、（ほぼ）意味のないことになっている。

だから、以下全部動く。

123

<select onchange="javascript: alert(123);">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

クリックしてみて！

<span onclick="softel: alert(123);">クリックしてみて！</span>

<input type="button" onclick="http: alert(123);" value="http: alert(123);">

「javascript:」に無理やり意味を付けてみた例。

<input type="button" onclick="javascript: { break javascript; hoge(); hoge(); } alert('hoge()関数を飛び越えてここにきました。');">