ブラウザバックボタンを押したときに、指定したページに戻したい!!!

Question

jsはまったくの初心者です。
https://qiita.com/szaizen/items/91e652392825b90ef14a
https://developer.mozilla.org/ja/docs/Web/API/Window/history
https://qiita.com/t-okushima/items/9f01d8a033e16557e62e
https://techacademy.jp/magazine/21253
こちらのqiita等読みました。

ブラウザバックを制御する系の記事は多いのですが、 ブラウザバックボタンを押下時に指定したページに戻すようにしたいです。

調べたところ、

pushstateで履歴を追加、
window.popstateでブラウザバックを感知、
window.history.back();で一つ前に戻る。

これらを利用して、

$(function(){
   history.pushState(null, null, 追加したいページ);
   $(window).on("popstate", function (event) {
     window.history.back();
   })
 });

で実装可能なのかと思っていますが、特に変化がありません。
どなたかご教授いただけますでしょうか？よろしくおねがいします。

Comments

[miyabi_pudding]

この構文は、"追加したいページ"と、
"遷移元"どちらに記載しておりますか？？

[yambejp]

「指定したページに戻すよう」とは「history.back」するという意味ですか？
ページ内リンクしたあとの戻りはどうするのでしょうか？
（戻るをおしても同じページ内に戻る）

[roy20]

反応ありがとうございます!
遷移元のページだと思います!
遷移元ページのhtml.hamlにjavascript_include_tagを追加し、assetsのjavascript内にjsファイルを作成しています!!

追加したいページとは履歴に追加したいページのことで、遷移元とはブラウザバックボタンを押すページという認識でしょうか？

[roy20]

yambejpさん
指定したページとは history.pushState(null, null, 追加したいページ);
で追加した履歴のことです! 戻すという書き方がよくなかったですかね、、
今回の件はページ内リンクも考慮する必要があるのでしょうか？

[miyabi_pudding]

なるほど・・・。
Ruby on Railsを使った上で、JSライブラリなどを読み込んでいないと再現しないようです。
質問のJS構文だけだと、
history.pushState(null, null, 追加したいページ);が実行された時点で、追加したいページに遷移し、そこで処理が終了します。
（要は追加したいページが表示される、そこでブラウザバックをしたら、遷移元は表示されずにそのさらに前ページが表示される、変化がないという動きは再現されない）
よって、
遷移元ページ、追加したいページで読み込んでいる他のJavaScript類も掲示していただかないと、問題解決に繋がる回答は得られないかと思います・・・。
また、レンダリング後のHTMLも記載いただいた方がいいかと。

[yambejp]

＞今回の件はページ内リンクも考慮する必要がある

むしろどうしたいのか仕様をきめてくださいという話です
「ブラウザバックボタンを押したとき」とはページ内リンクでも
ブラウザバックという状況はあります

[miyabi_pudding]

あ、いや待てよ・・・。
$使ってるから先入観で言ってしまいましたが、jQueryは読み込んでますよね？
質問の構文は、$使ってるその書き方だと、jQueryを読み込んでいる前提の構文なので、jQuery読んでないと実行されません。
（$なんてないよ、ってエラーが起き、変化ないように見える）

[roy20]

jquery読み込んでます!今javascript_include_tagの読み込み場所を変更したところゴールに近づきそうですTT

Answer 1

↓ブラウザバックしてみてください。
サンプル

$(function(){
   history.pushState(null, null);
   $(window).on("popstate", function (event) {
     location.href = "https://teratail.com/questions/252619";
   })
 });

Comments

[roy20]

すごい!再現できるものをつくっていただきありがとうございます!すごくわかりやすいです!

history.pushState(null, null);の部分は
1つ目のnullで空履歴を作成していて、2つ目のnullでページタイトルを指定しないため。で合っていますでしょうか？
(pushStateメソッドの第1引数にstate オブジェクト、第2引数にタイトル、第3引数にURLを渡します。と調べました。stateオブジェクトがつかめていないですが、、)

history.pushState(null, null, null);
は調べると多くお目にかかりました。こちらと挙動は変わらないように思いましたが、実際は違うのでしょうか？

[miyabi_pudding]

横槍すみません。
そうか、現在のページを履歴して、
バックボタンを押した際に、ロケーションで遷移ってわけですね・・・。
フロントフレームワークとかでやってそうです。

質問者さん、
https://developer.mozilla.org/ja/docs/Web/API/History_API/Working_with_the_History_API
を見ると理解できるかと思います。
第三引数は省略でき、nullを入れた時と同じ挙動になります。
第三引数に値が無い場合、
現在のページの履歴をプッシュするようですね。

[Lhankor_Mhy]

第3引数は省略可能で、省略された場合は現在のURLの履歴を作成します。

なので、このページをB、Bに移動してきた元ページをA、転移先をCとすると、
A→B
と移動した時に、
A→B→B
という履歴に変えるわけです。
ここでBFすると、Bに移動するわけですから、Bに書かれたスクリプトでイベントが拾えて、Cに移動し、
A→B→C
という履歴になります。

ただ、問題があり、
A→B→C
の状態からBFすると、履歴は
A→B→B
になり、「進む」でCに行くことができなくなります。

なので、本来は、state などを使って状態管理をした方がいいのでしょうね。

[roy20]

miyabi_takatsukさん, Lhankor_Mhyさん
すごくわかりやすく回答していただきありがとうございます!

Answer 2

ブラウザの処理については4パターン考えておいたほうがよいでしょう

• 最初のアクセス
• リロード
• ブラウザバック
• ページ内リンク

Comments

[yambejp]

具体的にはこんな感じ
<script>
var flg=window.performance.navigation.type;
window.addEventListener('pageshow', function(e){
if(flg==2){
location.href="ttps://www.yahoo.co.jp"
}
list=["first","reload","back"];
console.log(list[flg]);
flg=2;
});
window.addEventListener('popstate', function(e){
console.log("hash");
});
</script>
<a href="ttps://www.google.com">google</a>
<a href="#">hash</a>
<input type="button" value="reload" onclick="location.reload()">

googleにとんで戻ってきたらyahooに行きます

[roy20]

ご丁寧にありがとうございます!こちらのコードを理解できるようがんばります!

[yambejp]

ttpは読み替えてくださいね（リンクになるのを防ぐために一文字削除しています）