ページを移動する前にJavaScriptで確認ダイアログを表示する

2010/8/5 13:12

よく編集した内容を保存せずにブラウザを閉じたり、別のページに移動しようとしたりする際に確認ダイアログが表示されることがあります。

↑ こんなダイアログ。

これを実装するには、JavaScriptで次のようにします。

function hoge(event) {
    if (確認ダイアログを表示するかどうか) {
        event = event || window.event;
        return event.returnValue = '表示させたいメッセージ';
    }
}
if (window.addEventListener) {
    window.addEventListener('beforeunload', hoge, false);
}
if (window.attachEvent) {
    window.attachEvent('onbeforeunload', hoge);
}

event.returnValue を return する関数を beforeunload / onbeforeunload イベント発生時の処理として定義するといいようです。毎回ダイアログが表示されると困るので、if文で表示条件を定義することになると思います。

【参考】
» 自分自身をロードするときにフレーム解除してロードしようとするサイトをフレームで開くときの抑制方法 – blog.katsuma.tv
» ページ移動の前に確認をする、onbeforeunloadサンプル:phpspot開発日誌