フォームなどを作っている時に、ユーザーにブラウザバックやリロードなどの操作をしてほしくないときがあります。
その理由は入力したデータが保存される前で、ブラウザバックやリロードなどによってデータが消えてしまうからです。
この記事では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の参考書籍をまとめておきます。
コメント