ページを移動する前に確認メッセージを表示する

カテゴリ:Javascript小技 2008年6月 8日 10:19

コメント入力中だったり、決まったページ遷移から外れる処理だったり、ページを移動する前に確認したい場合があると思います。
最近の案件で、これを使う機会があって調べたのでメモ的にエントリーしてみます。
ちなみに、これを簡単に実装するスクリプトも書いてみたのでよかったら使ってみてください。

ってことで以下サンプル↓

▼EntryMore▼

ページ移動前のイベント「onbeforeunload」

簡単に動作を説明すると、各ブラウザが持っている「onbeforeunload」というイベントハンドラに関数を設定します。(※どうやらOperaはこのイベントハンドラを持っていないようです)
イベントハンドラとは、onclickやonchangeなど、なにかアクションをした際に実行されるイベントをキャッチするものです。
この「onbeforeunload」は、ページの移動を感知すると実行されます。(例えばリンクをクリックしてページを移動しようとしたり、ページを閉じようとしたりなど)

そして、その設定した関数の中で「return event.returnValue = '移動前に表示する確認のメッセージ';」で文字列を返すと、その文字列がアラートで表示され、OKを押すとページを移動し、キャンセルを押すとページの移動がキャンセルされる、というわけです。
(※最初の「return」がなくてもIEとFirefoxでは動作しますが、Safariでは動作しないため「return」をつけています)

また、この関数部分になにかの処理を入れることもできます。
ただ、その処理に応じてページの移動をストップする、ということはできません。
これができてしまうと、ウィンドウを閉じることも、そのページから移動することもできなくなるページが作れてしまうので、セキュリティ対策のためと思われます。

簡単に説明しましたが、上記のものを簡単に実装するスクリプトを作ってみたので、よかったら使ってみてください。使い方は簡単です。以下のようにスクリプトファイルを読み込み、表示したいメッセージや、実行したい関数を指定するだけです。

ページ移動前のイベント「onbeforeunload」の簡単実装サンプル

サンプルJSファイル

この記事は、「ページ遷移前に確認をする、onbeforeunload - 実用」の記事を参考にさせていただきました。

この記事のカテゴリー一覧を見る⇒Javascript小技

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/82