ここまではボタンに対してイベントを使いました。しかし、イベントは、さまざまなものに対して使うことができます。
例えば、Webページ全体にイベントを使うこともできます。この場合、HTMLのタグにJavaScriptを書きます。
さっそくJavaScriptを書いて、サンプルをWebブラウザで動かしてみましょう。
<html> <body onload="alert('いらっしゃいませ。')" onunload="alert('またどうぞ。')"> ようこそJavaScriptの世界へ<br> </body> </html>
onload(オンロード)は、HTMLが読み込まれたことをきっかけにするイベントです。onunload(オンアンロード)は、別のWebページに移動したり、Webページが閉じられたりしたことをきっかけにするイベントです。
onloadは、海外のWebサイトなどではポップアップ広告を出すのに使われていますが、本来はWebページが完全に読み込まれてから、JavaScriptを動かしたいときなどに使うのが正しい使用方法です。
便利なJavaScriptも使用方法によっては、ユーザーの反感を買うことになるので、注意しましょう。
また、最近は減りましたが、次のようなJavaScriptを使ったWebページを見かけることがあります。
<html> <body oncontextmenu="alert('右クリック禁止!'); return false"> このページは右クリック禁止です。<br> </body> </html>
Windowsの右クリックで出るメニューのことをコンテキストメニューといいます。oncontextmenu(オンコンテキストメニュー)は、右クリックで出てくるメニューを表示したことをきっかけにするイベントです。
【注意】
oncontextmenuは、WindowsのInternet Explorer、Firefox、Google Chromeでは有効ですが、Operaはoncontextmenuのイベントをサポートしていません。
このように、Webブラウザの種類やバージョンによってサポートしてるJavaScriptに若干の違いがあります。
Webブラウザによる違いは、JavaScriptを扱ううえで避けてとおれない問題なので、機会があれば解説したいと思います。しかし、この連載では当面、Internet Explorer 8を使用して解説をしていきます。
oncontextmenu=の中身を少し詳しく見てみましょう。alertで警告ダイアログを出した後に、;およびreturn falseと書かれています。
;(セミコロン)はJavaScriptの区切りです。複数のJavaScriptを書くときに、JavaScriptの終わりを;で区切ります。JavaScriptが1つしかない場合や、JavaScriptの最後には書かなくてもかまいません。
次のreturn falseを簡単に説明すると、起きたイベントをなかったことにしたいというときに使います。この場合、本来は「右クリックされたらコンテキストメニューを表示する」ところを、警告ダイアログを表示して、本来の「右クリックの動作をなかったこと」にしています。
このほかにもreturn falseの使い方として、<a>タグに対して、
<a href="http://www.google.com/" onclick="return false">リンクできない</a>
とすると、本来はリンクをクリックするとURLに移動するのに、リンクがクリックされたことを「なかったこと」にしてしまい、ページ遷移しないようにできます。
このreturn falseも、一見使い道がないように思いますが、覚えておくと大変役に立ちます。
ところで、この右クリック禁止がうっとうしいという人多いですよね。そこで、JavaScriptを使って「右クリック禁止を禁止」してみましょう。
まずは、先ほどの右クリック禁止のサンプルを実行して、右クリックが禁止になっているのを確認ください。
さて、どのようにしたら、表示されているWebページのJavaScriptを上書きして、右クリック禁止を禁止できるでしょうか。
皆さんは、第1回の冒頭で紹介したブックマークレットを覚えているでしょうか。ブックマークレットは、Webブラウザのアドレスバーに直接JavaScriptを書き込んで実行するものです。
そう、ブックマークレットを使えば、表示されているWebページのJavaScriptを上書きできるのです! 以下のスクリプトを1行でコピーして、Webブラウザのアドレスバーに張り付けてみてください。
javascript:alert('右クリック禁止を禁止!'); document.body.oncontextmenu=''; document.oncontextmenu=''; document.onmousedown=''; void(0)
右クリック禁止が禁止されて、コンテキストメニューが表示されるようになりましたか。このブックマークレットを使えば、多くの「右クリック禁止サイト」の右クリック禁止を禁止にできると思います。
サンプル以外でも、Webページで右クリック禁止を見つけたらこのブックマークレットを試してみてください。
Copyright © ITmedia, Inc. All Rights Reserved.