[javascript] ページ離脱時にポップアップ表示

ページ離脱時にポップアップ表示
formのsubmitの際はポップアップ非表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<h1>商品ページ</h1>
    <form action="/" method="get" id="form" class="form-example">
      <div class="form-example">
        <label for="name">商品名: </label>
        <input type="text" name="name" id="name" value="チョコレート">
      </div>
      <div class="form-example">
        <label for="name">購入者名: </label>
        <input type="text" name="name" id="name">
      </div>
      <div class="form-example">
        <label for="email">個数: </label>
        <input type="number" name="number" value="1">
      </div>
      <div class="form-example">
        <input type="submit" value="今すぐ購入">
      </div>
    </form>
    <br><br>
    <a href="/">リンク</a>
    <script>
 
        var onBeforeunloadHandler = function(e) {
            e.returnValue = 'ページから離れます。よろしいでしょうか？';
        };
        window.addEventListener('beforeunload', onBeforeunloadHandler, false);
 
        const path = location.pathname;
 
        var cookies = document.cookie;
        var cookiesArray = cookies.split(';');
 
        for(var c of cookiesArray){
            var cArray = c.split('=');
            if( cArray[0] == 'page' && cArray[1] == path){
                window.removeEventListener('beforeunload', onBeforeunloadHandler, false);
            }
        }      
 
        const form = document.getElementById('form');
        form.addEventListener('submit', function(e) {
            window.removeEventListener('beforeunload', onBeforeunloadHandler, false);
        }, false);
 
        var date1,date2;
        var kigen = 1;
        date1 = new Date();
        date1.setTime(date1.getTime() + kigen*24*60*60*1000);
        date2 = date1.toGMTString();
 
        document.cookie = "page=" + path+";expires=" + date2;
    </script>