今日は表題の件を実装したときにぶち当たった問題をあげながらhistory.back()をつかって
直前のページに戻れるようにしようと思います。
ちなみに実装はWordpressです。
すぐみのHTMLでも使用できると思います。
javascript使って問題を回避するので、よくわからない人はコピペで使ってみてください。
▼history.back()を実装するに至った経緯
入り口が複数あるけれど、行きつくページが一緒。
そのため最初は安易にhistory.back()で、前のページに戻れればいいと思ってました。
・サイト内検索結果ページ ⇒詳細ページA
・特定の固定ページ ⇒詳細ページA
・検索エンジンから ⇒詳細ページA
▼history.back()でぶち当たった問題
・別タブで開いたときにhistory.back()じゃどこにも戻れない
・検索エンジンからきた場合、サイトから離脱
・FacebookなどSNSで共有されたリンクの場合、これもサイトから離脱して他サイトへ戻ってしまう
▼解決策
・別タブで開いたときは、設定しておいたhrefのリンクにもどる(例えばサイトのトップページなど)
・サイト内検索や特定の固定ページなど同一ドメインの場合は、history.back()する
・検索エンジンや別サイトから来た場合もhrefのリンクにもどる
・Javascriptが無効になっている場合もhrefのリンクにもどる
javascriptは以下のように記載してください。
解説は、直接ソースに記載してます。
$(document).ready(function(){
(function(){
var ans; //1つ前のページが同一ドメインかどうかを判定する
var bs = false; //history.back()がうまく動いているかどうかを判別する
var ref = document.referrer;//サイトの経由(リファラー)を判別する
//onbeforeunloadは一応opera用、unloadで他ブラウザは動くはず
$(window).bind("unload beforeunload",function(){
bs = true;
});
//1つ前のページが同一ドメインかどうか
re = new RegExp(location.hostname,"i");
if(ref.match(re)){
ans = true;
}else{
ans = false;
}
//.returnはaタグに仕込むクラスです。適宜書き換えを
$('.return').bind("click",function(){
var that = this;
if(ans){ //もし同一ドメインだったらhistory.back();
history.back();
setTimeout(function(){
if(!bs){
location.href = $(that).attr("href"); //JS無効だったらhrefに設定したリンクへ
}
},100);
}else{ //それ以外もhrefに設定したリンクへ
location.href = $(this).attr("href");
}
return false;
});
})();
});
<div class="viewDetail"><a href="URL">もどる</a></div> //wordpressだったら<?php home_url(); ?>でもよいかも
以上、みなさんも試してみてください。
k