LANG SELRCT

コードを書く場所についてはこちら

2018年5月17日木曜日

画面遷移前にアラートを出す


今いるページで何か操作をしてから画面遷移する前に以下のようなダイアログを出したい




デモ


上のテキストエリアに何か文字を入力してから
このページを閉じたり更新したり別のページへ移動したり
しようとすると確認ダイアログが表示されます



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <textarea></textarea>
  <script>
  window.onbeforeunload = function(e) {
    return e.returnValue;
  }
  </script>
</body>
</html>

意訳
 


テキストエリア

画面遷移前に
確認ダイアログを返す







補足


参考にしたサイトではダイアログにメッセージを表示できそうにかかれていましたが
手元で試したところメッセージは渡せずに

行った変更が保存されない可能性があります。

という固定の文字列しか表示できなかった。


こういうhtmlを試してみた


index.html
<!DOCTYPE html>
<html>
<body>
  <textarea></textarea>
  <script>
  window.onbeforeunload = function(e) {
    var dialogText = '本当にこのページを離れていいですか?';
    e.returnValue = dialogText;
    return dialogText;
  };
  </script>
</body>
</html>

本当にこのページを離れていいですか?

はダイアログに表示されず

行った変更が保存されない可能性があります。

が表示された。