Help us understand the problem. What is going on with this article?

【JavaScript】ページ離脱時に beforeunload でアラート表示、だがカスタムメッセージが設定できない

More than 1 year has passed since last update.

JavaScript で beforeunload イベントを使うと、ブラウザの閉じるボタンやリロード、他のページに遷移しようとしたときにアラートを表示することができます。

以下は、aタグリンクとsubmitボタンを配置しただけのHTMLです。

index.html
<!DOCTYPE html>

<html lang="ja">
<head>
  <title>beforeunloadTest</title>
</head>

<body>

  <form action="index.html" method="get">

    <div>
      <a href="index.html">link</a>
    </div>
    <div>
      <input type="submit" id="mySubmit" value="submit">
    </div>

  </form>

  <script src="main.js"></script> 
</body>
</html>

以下のように、beforeunloadイベント発火時の処理とイベントの登録を実装します。

main.js
// beforeunloadイベント発火時の処理
var unloaded = function (e) {
    // カスタムメッセージの設定(後述するが、EdgeとIEしか表示されない)
    var confirmMessage = '離脱するの?';
    e.returnValue = confirmMessage;
    return confirmMessage;
};

// beforeunloadイベントの登録
window.addEventListener('beforeunload', unloaded, false);

// 特定のボタンがクリックされたときはアラートを表示しないようにもできます。
document.getElementById('mySubmit').addEventListener('click', function(){
    // submit時はアラート表示させない
    window.removeEventListener('beforeunload', unloaded, false);
});

ただし、上記で設定した「離脱するの?」というカスタムメッセージはEdgeIEでしか表示されません。
確認時のバージョンは以下。

  • Chrome : 62
  • Safari : 11
  • Firefox : 57
  • Edge : 40
  • IE : 11.726
  • Opera : 49
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away