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

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

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

この記事では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の参考書籍をまとめておきます。

created by Rinker
¥2,860 (2022/05/17 10:27:41時点 楽天市場調べ-詳細)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

目次
閉じる