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.



(adsbygoogle = window.adsbygoogle || []).push({});


(adsbygoogle = window.adsbygoogle || []).push({});

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

関連記事

DB操作フレームワーク はJPA or mybatis?

開発に向けた準備で、開発標準を準備するフレームワーク(FW)チーム、それらを使って実装を行う業務チームが集まって、「DB操作を行うためのFWは何を使うか?」という協議になった。 FWチームは、FW・J …

vbaでのエンコード/デコードのサンプル

Excel(vba)で、MD5/SHA-1/SHA-2(SHA-256)の出力、Hex/Base64エンコード/デコードを調べたので備忘録として残します。 動作検証した環境は、Windows10+Of …

Javaによるzipファイルの安全な解凍方法

以前、業務アプリ(Java)でzipファイルの操作が必要となったため、Javaにおけるzip圧縮解凍について調査しました。また、zip4jを使った圧縮・解凍についても説明しました。 ここでは、もう少し …

CentOS7のマルチホーム化

サイトの存在を隠しつつも、sftpサーバを公開し、後輩と1G以上のファイルのやりとりしたい。 パブリック側のIPアドレスを教えてしまうと、どこのサーバだろうかとブラウザで開いたりするとサイトの存在がわ …

jQueryによるデフォルトボタンの実装

デフォルトボタンについて Webページ上でエンターキーを押した場合、そのページ上であらかじめ決められたボタンをクリックしたかのように処理を実行する仕組みがある。何らかのデータの検索を行うようなページは …