みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

ページを離れる際に確認のダイアログを出す(PC版)

f:id:kimizuka:20141217231308p:plain

window の beforeunloadイベントのコールバック内でreturnValueにストリングを代入すると、ページ遷移しようとした際にダイアログが表示されます。


JavaScript

window.addEventListener("beforeunload", function (evt) {
    evt.returnValue = "じぇじぇじぇ!";
}, false);

これを応用すると、特定のボタンを押した際にはダイアログを出さずに遷移、その他の遷移方法ではダイアログで確認というページがつくれます。フォームの入力中のみダイアログを出す等の処理も同じ感じで実装できます。



DEMO


JavaScript

(function(win, doc) {

    "use strict";
    
    var canMove = false;

    win.addEventListener("beforeunload", function (evt) {
        var msg = "じぇじぇじぇ!";
    
        // フラグが立っていたらリターン
        if (canMove) {
             return;
        }
        
        evt.returnValue = msg; 

        
    }, false);

    doc.querySelector(".link").addEventListener("click", function(evt) {
        // リンクボタンを押した際にはアラートを出さないようにフラグをたてる
        canMove = true;
    
        // 一定時間後にフラグを戻す
        setTimeout(function() {
           canMove = false;
        }, 100);

    }, false);

})(this, document);

iPhoneでは動かないのでご注意を。