Posted at

JSでブラウザの履歴を操作する


historyについて

JSではhistoryオブジェクトを使用して、ブラウザの履歴を操作することができる

ブラウザの戻るボタンを押した時に戻る場合など、この履歴に応じてページの遷移が行われている

ブラウザの履歴を操作する


historyは削除できない

追加や変更はできるようだが、historyの削除はできないよう


代替案

ケースバイケースだけど、もし消したいと思った場合に使えるかもしれないことがいくつかあったのでまとめ

A→B→C の遷移でCから戻る時にAに戻したいというケースを考えてみる(Bを消したい)


履歴を残さないで遷移させる

画面遷移時にlocation.replaceを使うと履歴が残らないようになる

BページからCページへ遷移する際に使用をすると、Bページの履歴が残らなくなる

そのため、Cページで戻るボタンを押すとその前にいたAページに戻ることができる

画面遷移:A→B→C

履歴:A→C

// page B → page C

location.replace('/C/')

参考

http://note.onichannn.net/archives/1443


履歴書き換えることはできる

前にいたーページをJSを使って書き換えることで、戻るボタンを押したおきにそのページに戻るようにする

A→B→Cの順番でページの遷移をしている場合、Cページで1つ前の履歴をAページとするとAページに戻れるが、A→A→Cという履歴になってしまうので注意が必要

画面遷移:A→B→C

履歴:A→A→C

// Cページで1つ前の履歴をAページとする

history.replaceState(null,null,"/A/");


戻るボタンクリック時に2つ戻す

戻るボタンをクリックすると、JSでC→B→Aと遷移をさせる

画面遷移:A→B→C

履歴:A→B→C

// 戻るボタンを押された時に何も処理を行わない

history.pushState(null, null, null);

// 戻るボタンを押した時の処理を追加
window.addEventListener("pushState", function() {
// -2で2つ戻る(-1なら1つ戻る)
history.go(-2);
})