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では動かないのでご注意を。