ブラウザバック禁止やリロード、タブを閉じる時に警告をする

React
スポンサーリンク
language

フォームなどを作っている時に、ユーザーにブラウザバックやリロードなどの操作をしてほしくないときがあります。

その理由は入力したデータが保存される前で、ブラウザバックやリロードなどによってデータが消えてしまうからです。

この記事ではreactでブラウザバックやリロード、タブを閉じる時に警告する方法をご紹介します。

スポンサーリンク

ブラウザバックを禁止する

ブラウザバックを禁止するjavascriptのサンプルコードは以下の通りです。

history.pushState(null, null, location.href);
window.addEventListener('popstate', (e) => {
  alert('ブラウザバックを使わないでください。');
  history.go(1);
});

addEventListener() メソッドを使用してブラウザバックを検知します。
イベントのタイプはpopstateです。

ブラウザの戻るボタンをクリックするとURLは前のページのURLに変更されます。
この時にpopstateが発火します。

そのため、history.go(1)を使用してページを1つ進めて元のURLにする必要があります。

このコードをreactに組み込む場合は、componentDidMount()の中に組み込みます。

class Example extends React.Component {
  ...

  componentDidMount() {
    // ブラウザバックを禁止する
    history.pushState(null, null, location.href);
    window.addEventListener('popstate', (e) => {
      alert('ブラウザバックを使わないでください。');
      history.go(1);
    });
  }

  ...
}

react hooksを使用している場合はuseEffectの中にブラウザバックを禁止するコードを書きます。

const example = () => {
  ...
  useEffect(() => {
    // ブラウザバックを禁止する
    history.pushState(null, null, location.href);
    window.addEventListener('popstate', (e) => {
      alert('ブラウザバックを使わないでください。');
      history.go(1);
    });
  })
  ...
}

リロード、タブを閉じる時に警告する

ブラウザのリロード、タブを閉じるのを警告するjavascriptサンプルコードは以下の通りです。


// イベントの設定
window.addEventListener('beforeunload', this.onUnload);

// イベントの設定解除
window.removeEventListener('beforeunload', this.onUnload);

onUnload(e) {
  e.preventDefault();
  e.returnValue = '';
}

addEventListener()メソッドのbeforeunloadイベントを使用して、リロードとタブを閉じるイベントを検知します。

リロードとタブを閉じるイベントを検知したら、e.preventDefault()で警告のモーダルを表示します。
そして、e.returnValueでモーダルダイアログのプロパティに文字列を代入します。

ブラウザのリロード、タブを閉じる際に警告を出すのをreactに組み込むサンプルコードは次の通りです。

class Example extends React.Component {
  ...

  componentDidMount() {
    // イベントの設定
    window.addEventListener('beforeunload', this.onUnload);
  }

  componentWillUnmount() {
    // イベントの設定解除
    window.removeEventListener('beforeunload', this.onUnload);
  }

  onUnload(e) {
    e.preventDefault();
    e.returnValue = '';
  }

  ...
}

react hooksを使用している場合はuseEffectの中にブラウザバックを禁止するコードを書きます。

const example = () => {
  ...
  useEffect(() => {
    // イベントの設定
    window.addEventListener('beforeunload', onUnload);

  return () => {
      // イベントの設定解除
      window.removeEventListener('beforeunload', onUnload);
    }
  })

  const onUnload = (e) => {
    e.preventDefault();
    e.returnValue = '';
  }
  ...
}

まとめ

ブラウザバック禁止やリロード、タブを閉じる時に警告をしてユーザーの行動をある程度制限することはできますが、UXが悪くなります。

よくご検討の上ご使用ください。

この記事でわからないコードなどがあれば、書籍で勉強するのがおすすめです。
プログラミングの技術の移り変わりは早いので最新版の書籍を購入することをお勧めします。
中古本を買って勉強したけど、今は使われない技術だったということはよくあります。

javascript・Reactでおすすめの書籍をご紹介します。

りーほー
りーほー

JavaScriptを基礎からしっかり学びたい方におすすめ!

りーほー
りーほー

JavaScriptを基礎から応用までガッツリ学びたい方におすすめ!

りーほー
りーほー

Reactの概念や仕組みを把握し、開発で使えるReactを学びたい方にオススメ!

タイトルとURLをコピーしました