今日は表題の件を実装したときにぶち当たった問題をあげながら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