みかづきブログ その3

3ヶ月つづけてみました。

ページを離れる際に確認のダイアログを出す(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では動かないのでご注意を。