JavaScriptでhistory.back()が効かない原因を解説！
JavaScriptでhistory.back()が効かない原因について解説します。このJavaScriptでhistory.back()が効かない問題はJavaScript初学者の誰しもが陥る問題だと思います。ここでその問題を解決しましょう。
JavaScriptでhistory.back()が効かない問題
JavaScriptでhistory.back()が効かなくて、前のページに戻れないという問題はJavaScriptを学習している時に、誰しもがぶつかる問題だと思います。ここでその問題を解決しましょう。
まずJavaScriptのhistory.back()の使い方が分からない人のために簡単に使い方について解説します。
まず以下のようなサンプルコードを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
display: block;
text-align: center;
}
section {
text-align: center;
}
</style>
</head>
<body>
<div>
<a href="#about">概要</a>
</div>
<div>
<section id="about">
<p>これは概要です。</p>
<a href="#" id="back-link">戻る</a>
</section>
</div>
</body>
<script>
const backLink = document.getElementById('back-link');
backLink.addEventListener('click', () => {
history.back(-1);
});
</script>
</html>URLに着目していただきたいのですが、このコードにより、概要のリンクボタンを押すと「#about」に、戻るリンクを押すと「#」になり、うまくhistory.back()が機能していることが分かります。
ではコードの解説を簡単に行います。
まずイベントを発生させたい要素にIDを付与し、JavaScriptでそのID要素を読み取り、addEventListenerでclickされたときにhistory.back()されるようにコードを書きます。
そしてhistory.back()の引数に-1があるのですが、こうすることで一つ前のページに戻ります。この引数には戻りたいページ分に合わせて適宜調整してください。
ではどういった時にこのhistory.back()が効かないのか次の項目で見ていきましょう。
JavaScriptでhistory.back()が効かない原因
JavaScriptでhistory.back()が効かなくて戻れない主な原因は2つあります。
それはbuttonタグを用いた場合とaタグを用いた場合の二つです。
それではそれぞれについて紹介します。
buttonタグを用いた場合
buttonタグを用いた場合、type属性がsubmitとなっていると、ブラウザによりけりですがhistory.back()が効かない場合があります。
ですので対処法としてはbuttonタグを用いた場合にhistory.back()を活用する際は、type属性をbuttonにしておくといいでしょう。
aタグを用いた場合
aタグを用いて戻るリンクボタンを押した際に効かない原因としては、ブラウザによりけりですがURLに「#」が付与されてしまって、これが原因になるようです。
では以下で解決方法を二つ紹介します。
returnをfalseとする
returnをfalseとすることで、戻るリンクを押してもURLに「#」が付かなくなります。
サンプルコードを実際に用いて試して欲しいのですが、概要リンクを押した後に戻るリンクを押すと、1つ目のサンプルコードではURLに「#」が付いていたのに対し、returnをfalseとした場合「#」が付いていないことが分かります。
では以下のコードを用いて試してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
display: block;
text-align: center;
}
section {
text-align: center;
}
</style>
</head>
<body>
<div>
<a href="#about" class="about">概要</a>
</div>
<div>
<section id="about">
<p>これは概要です。</p>
<a href="#" id="back-link">戻る</a>
</section>
</div>
</body>
<script>
const backLink = document.getElementById('back-link');
backLink.addEventListener('click', (e) => {
history.back(-1);
return false;
});
</script>
</html>戻るリンクを押した後URLに「#」が付いていないことが分かります。
e.preventDefault()を付与する
二つ目のコードのreturnをfalseとしていた部分を、e.preventDefault()と置き換えてください。
そして概要リンクを押した後に戻るリンクを押すと、URLに「#」が付いていないことが分かります。
まとめ
JavaScriptでhistory.back()が効かないという問題は、ブラウザによって発生します。
ユーザーがどのブラウザを使用しているのか分からないので、history.back()を用いた際は、どのブラウザであっても効かないというバグを生まないためにも、ここで紹介した方法を用いてぜひ実装してみてください。
