検索
連載

イベントで「右クリック禁止」を禁止してみよう初心者のためのJavaScript入門(2)(3/4 ページ)

JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず!?(編集部)

PC用表示 関連情報
Share
Tweet
LINE
Hatena

イベントをいろいろな場所に書いてみる

 ここまではボタンに対してイベントを使いました。しかし、イベントは、さまざまなものに対して使うことができます。

 例えば、Webページ全体にイベントを使うこともできます。この場合、HTMLのタグにJavaScriptを書きます。

 さっそくJavaScriptを書いて、サンプルをWebブラウザで動かしてみましょう。

<html>
  <body onload="alert('いらっしゃいませ。')" onunload="alert('またどうぞ。')">
  ようこそJavaScriptの世界へ<br>
  </body>
</html>

 onload(オンロード)は、HTMLが読み込まれたことをきっかけにするイベントです。onunload(オンアンロード)は、別のWebページに移動したり、Webページが閉じられたりしたことをきっかけにするイベントです。

サンプル9
HTMLが読み込まれたとき
サンプル10
別ページに移動したときやWebブラウザを閉じたとき

 onloadは、海外のWebサイトなどではポップアップ広告を出すのに使われていますが、本来はWebページが完全に読み込まれてから、JavaScriptを動かしたいときなどに使うのが正しい使用方法です。

 便利なJavaScriptも使用方法によっては、ユーザーの反感を買うことになるので、注意しましょう。

 また、最近は減りましたが、次のようなJavaScriptを使ったWebページを見かけることがあります。

<html>
  <body oncontextmenu="alert('右クリック禁止!'); return false">
  このページは右クリック禁止です。<br>
  </body>
</html>
サンプル11

 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.

ページトップに戻る