ブラウザでページ移動前に確認メッセージを表示

　ブロックを追加で、カスタムHTMLを選択すると、下の画面になるので、HTMLを編集をクリックします。

　【概要】

　ページをアンロード（他のページに移動、ページを閉じるなどで現在表示しているページが消える）する前に「onbeforeunload」イベントが発生します。その時に「このサイトを離れますか？」のダイアログを表示して「はい」が選択された時にページを離れます。

【詳細】

　onbeforeunload時に確認メッセージを表示させます。ただし、フォームに入力が無い場合は、ページがアンロードされても問題がないので、確認メッセージを表示しないようにします。そのコードの説明をします。

• ➃でonbeforeunloadイベント時に実行される関数を登録します。
• その関数で、Event オブジェクトの returnValue プロパティに何らかの値を設定します。これにより、確認ダイアログが表示されます。
• フォームが変更された、フォームに入力があった時に、①と②でisFormChangeフラグがtrueになります。このフラグで確認メッセージを表示するか否かを判断します。

　このコードは文字を入力後に送信を行うcontactform7を想定しています。このため、送信ボタンを押したら、ページがアンロードされても問題がないので、確認メッセージを表示しないようにします。そのコードの説明をします。

• ➂で送信ボタンが押された時に発生するイベント時に、実行される関数を登録します。
• その関数に、ページがアンロードされる前のイベントを無効にするコード「window.onbeforeunload=null」を実装します。
• その関数を「document.addEventListener」に追加します。

// フォームに入力があった時にTrueになるフラグ
isFormChange = false;

// フォームに入力があった時にフラグを立てる　➀
document.addEventListener('input', function (event) {
  if (event.target.closest('.wpcf7')) {
    isFormChange = true;
  }
});

// フォームに変更があった時にフラグを立てる　➁
document.addEventListener('change', function (event) {
  if (event.target.closest('.wpcf7')) {
    isFormChange = true;
  }
});

// 送信ボタンが押されたイベント　➂
document.addEventListener( 'wpcf7mailsent', function( event ) {
    // ページがアンロードされる前に
    // 発生するイベントを無効にする
　　window.onbeforeunload=null;
}, false );

// ページがアンロードされる前に発生するイベント　➃
window.onbeforeunload = function(e) {
    // フォームに入力があった時、
    // このサイトを離れますか？のダイアログを表示
    // してその結果を返す
    if (isFormChange) {
        e.returnValue = " ";
    }
}