0

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

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

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

<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>

      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

1 件の回答 1

1

本題について

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

それはブラウザの機能なのでオフにすることが出来ないはずです。
英語版StackOverflowのページ
それが出来てしまうと悪意のある人によってアラートを表示しまくるといった嫌がらせが可能になってしまうかもしれないからです。

代案

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

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

HTML

<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>

CSS

.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;
}

JavaScript

// ハッシュ#が付いてしまいますが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);

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

1
  • isirin様 何度もご回答いただきありがとうございます。 アラート対応ではチェックボックスを非表示にできないのですね。 頂いたコードでテストして、対応してみます。 早急に対応頂きありがとうございました。
    – bebe7200
    Commented 2017年4月11日 1:44

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。