33914


現在フォームを作成し、フォームで戻るボタンを選択した際にアラートを表示させるようにしています。

その際「このページでこれ以上ダイアログボックスを生成しない」とメッセージとチェックボックスが表示されるため、この
**メッセージとダイヤログをJSで非表示にする設定** はございますでしょうか？  
ブラウザ側で制御する方法は見つかったのですが、システム側で非表示にする設定が見つからず  
どなたかご教授頂ければと存じます。

確認したブラウザは、クロームのバージョン 57.0.2987.133 になります  
ご回答頂く際はJSはでもJqueryでも問題ございません。  
恐れ入りますが、よろしくお願いします  

[code]

    <div class="entryProfile-buttonWrapper--fb flex">
      <div>
        <a class="btn btn-flat-facebook w-80-percent" href="/users/auth/facebook?is_business=false">
          Facebookで登録・ログイン </a>
      </div>
    </div>
    
    <form accept-charset="UTF-8" action="/registration" class="new_user" id="js-registrationForm" method="post">
      <div class="form-group row">
        <div class="col-xs-3 text-left">
          <span class="text-bold">姓（全角漢字）</span>
        </div>
        <div class="col-xs-4">
          <input class="form-control placeholder-no-fix" id="user_profile_attributes_last_name" name="user[profile_attributes][last_name]" placeholder="内田" type="text">
        </div>
      </div>
      <input class="btn btn-blue registrationForm-submit w-90-percent track-regist-db" data-disable-with="送信中..." id="submit-registration" name="commit" type="submit" value="無料会員登録する">
    </form>
[/code]

[code]

          onBeforeunloadHandler = (e) ->
            e.returnValue = 'このサイトを離れてもよろしいですか？'
          $(window).on 'beforeunload', onBeforeunloadHandler
    
          $('.btn.btn-flat-facebook').on 'click', (e) ->
            $(window).off 'beforeunload', onBeforeunloadHandler
          $('form').on 'submit', (e) ->
            $(window).off 'beforeunload', onBeforeunloadHandler
[/code]


CC BY-SA 3.0
2017-04-10T04:55:37.820
33899
2017-04-10T15:59:43.363
20360
question
javascript jquery coffeescript
beforeunloadイベントを利用した確認ダイヤログの表示で、チェックボックスを表示させない


## 本題について

> メッセージとダイヤログをJSで非表示にする設定

それはブラウザの機能なのでオフにすることが出来ないはずです。  
[英語版StackOverflowのページ](https://stackoverflow.com/questions/11729835/how-to-
disable-prevent-this-page-from-creating-additional-dialogs)  
それが出来てしまうと悪意のある人によってアラートを表示しまくるといった嫌がらせが可能になってしまうかもしれないからです。

## 代案

警告表示にアラートではなく自作のモーダルウィンドウを使うというのはどうでしょうか？  
更にイベントはbeforeunloadではなくpopstateを使うというのはどうでしょうか？  
popstateを使うとAjaxによるページの更新が必要になってきます。  
なので直接遷移後のページに飛んでくることへの対策としてサーバーソフトでrewriteをしたりNode.jsなどでサーバーサイドのルーターライブラリを使って同じページを返してJavaScript側で遷移をさせると行ったことが必要になってきます。

少し大掛かりになりそうなのでダイアログを消すためだけにわざわざそれをするのはあまりおすすめはできません。  
HistoryAPIを使ってモーダルの表示非表示を切り替えるだけのものはフラグが多く雑ですが書いてみたのでよかったらどうぞ。

HTML

[code]

    <button class="js-button-push-form">フォームのURLをpushする</button>
    <button class="js-button-push-notform">フォームでないURLをpushする</button>
    <div class="js-modal-back-alert">
      <p>このサイトを離れてもよろしいですか？</p>
      <button class="js-modal-button-cancel">戻らない</button>
      <button class="js-modal-button-accept">戻る</button>
    </div>
    <div class="js-modal-overlay"></div>
    
[/code]

CSS

[code]

    .js-modal-back-alert {
      display: none;
      position: fixed;
      z-index: 2;
    }
    
    .js-modal-overlay {
      background-color:rgba(0,0,0,0.75);
      display: none;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1;
    }
    
[/code]

JavaScript

[code]

    // ハッシュ#が付いてしまいますがhashchangeイベントを使ったほうがきれいなコードになるかと思います。
    
    let canBack = false;
    let isFormPage = false;
    
    const updateIsForm = () => {
      isFormPage = location.pathname === '/form-url';
    };
    
    const hideModal = e => {
      $('.js-modal-overlay').fadeOut();
      $('.js-modal-back-alert').fadeOut();
    };
    
    const showModal = e => {
      $('.js-modal-overlay').fadeIn('slow');
      $('.js-modal-back-alert').fadeIn('slow');
    };
    
    $(window).on('popstate', e => {
      if (!canBack && isFormPage) {
        history.pushState(null, 'ページ名', '/form-url');
        showModal();
        return;
      }
      updateIsForm();
      canBack = false;
    });
    
    // 確認モーダルの無効化
    
    $('form').on('submit', e => {
      e.preventDefault();
      canBack = true;
    });
    
    $('.js-button-fb-login').on('click', e => {
      e.preventDefault();
      canBack = true;
    });
    
    // 履歴追加
    
    $('.js-button-push-form').on('click', e => {
      history.pushState({formAddr: true}, 'フォームのページ', '/form-url');
      updateIsForm();
    });
    
    $('.js-button-push-notform').on('click', e => {
      history.pushState({formAddr: false}, 'フォームじゃないページ', '/not-form-url');
      updateIsForm();
    });
    
    // モーダル
    
    $('.js-modal-button-accept').on('click', e => {
      canBack = true;
      history.back();
      hideModal();
    });
    
    $('.js-modal-button-cancel').on('click', hideModal);
    
[/code]

追記:  
HistoryAPIを使うときは何らかのサーバー上で行わないとエラーになるので注意して下さい。


CC BY-SA 3.0
2017-04-10T15:50:15.757
33914
2017-04-10T15:59:43.363
2017-05-23T12:38:56.467
-1
14222
33899
answer