NDW

アプリ開発やトラブルシューティング等のノウハウ、キャンプや登山の紹介や体験談など。

1. システムエンジニアリング html/jquery 実装技術

離脱確認ダイアログの仕様と表示方法

投稿日:

概要

  • ページ移動やページを閉じる際に、次のような確認ダイアログ(アンロードダイアログ)を表示できます。
    ここでは、このダイアログの仕様や表示方法を説明します。
  • なお、このダイアログの正式名称がはっきりしないので、ここでは「アンロードダイアログ」と表記しています。(Chromeのリリースノートでは”onbeforeunload dialogs”と表記していますが、少々長いのでこの名前にしています。)

基本的な仕様と表示方法

  • 基本的な表示方法
    beforeunloadイベントで任意の文字列を返却することで、ページ移動やページを閉じる際にアンロードダイアログを表示できます。アンロードダイアログを表示しない場合は文字列を返却しないようにします。
    window.onbeforeunload = function(e){
        return ''; // アンロードダイアログを表示(メッセージ指定不可)
        // return; // アンロードダイアログを非表示
    };
    
    $(window).on('beforeunload', function() {
        return ''; // アンロードダイアログを表示(メッセージ指定不可)
        // return; // アンロードダイアログを非表示
    };
    
  • アンロードダイアログに表示するメッセージは変更不可
    以前は、文字列を返却することで表示するメッセージを変更できましたが、最近のブラウザではセキュリティ上の理由でメッセージを変更できなくなりました。
    window.onbeforeunload = function(e){
        // return 'メッセージ1';          // 結果: 既定メッセージのダイアログが表示
        // e.returnValue = 'メッセージ3'; // 結果: 既定メッセージのダイアログが表示
        // alert("メッセージ3");          // 結果: エラー
    };
    
  • なお、独自メッセージを表示するためにalert()関数を使用すると、Chromeの場合は次のエラーになります。
    Blocked alert(‘…’) during beforeunload.







-1. システムエンジニアリング, html/jquery, 実装技術

関連記事

WindowsにApacheを構築

アプリケーション開発環境として主にWindowsを使っています。 開発時の検証で使用するミドルウェアがApacheを使用することが多いので、ここでは開発環境であるWindowsにApacheを構築する …

マスタデータ生成ツール

開発や結合試験、本番環境等で使用するマスタデータをExcelで管理することがあります。 そのようなExcelファイルからDBに登録するためのインサート文を作成するために、いつもツールに悩むので作成して …

開発環境のJBoss EAP7にリモートアクセス

開発中のものを他者に見せたり、問題が発生している開発者の開発物を参照するために、eclipse上で起動しているEAP7のWebアプリに別のPCからアクセスしたい場合があります。 このための手順を記載し …

Hyper-VでリモートのISOイメージをマウント

皆で使用するCD/DVDはISOイメージファイルとして、ファイルサーバ上の共有フォルダに配置する運用を想定しています。Hyper-V上の仮想マシンのCD/DVDドライブに、これらのISOイメージファイ …

WindowsでQRコードを生成(VBScript)

概要 Windows環境でVBScriptを使用してQRコードを生成する方法を紹介します。 このVBScriptは、Excelを起動し、バーコードコントロールを使ってQRコードを生成しています。 動作 …