F.Ko-Jiの「一秒後は未来」

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

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

onbeforeunload-dialog.gif

↑ こんなダイアログ。

これを実装するには、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開発日誌

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など