SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

【Javascript】onclick=”javascript: ~~” って意味あるの?

問題

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

この「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 とともに使う場合しかなく、(ほぼ)意味のないことになっている。

だから、以下全部動く。


<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()関数を飛び越えてここにきました。');">

関連するメモ

コメント(1)

匿名 2014年10月13日 01:57

ググっててたまたまこのページ見たので。
onclick=”vbscript:~”

IEだとこれが有効です。
要は見たまんま、scriptの指定です。
未指定のデフォでvbscript扱いにされるブラウザはまず無いと思いますが…