こんにちは(・∀・)
前回ご紹介しましたJavaScriptのhistory.back()ですが、このhistory.back()、もどるのは履歴に沿って行うので、当然その前に見ていたページに戻ることになります。
大体はそれでいいのですが、それでは困る場合もあります。例えば検索から飛んできたら検索結果のページに戻ってしまいますし、ブックマークから直接来たら、前に見ていたページの履歴を辿ってしまうことになります。そのページに戻るボタンを付ける場合、大抵はその元のページに辿らせたいというのが趣旨なわけですから検索ページやその他のページに戻ってしまうのでは本来やりたいことに反してしまうということになり、history.back()では思ったような導線は引けないことになります。
ではどうすればいいのか、大概はそういうボタンを付けたいページには親ページがあることが多いと思います。で、階層も親であることが大概なので親ページに戻るボタンを作ればいいのではないかと考え、今回ご紹介しますサンプルを作ってみました。よろしければご活用ください。
サンプルデモ
HTML
<a href="javascript:void(0)" onclick="jump(); return false;">前のページにもどる</a>
JavaScript
var local = window.location;
var url = local.origin;
url + getDir(local);//現在ディレクトリを取得
var url2 = url + getDir(local,1);//親階層ディレクトリを取得
function getDir(place, n) {
return place.pathname.replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((n || 0) + 1) + "}$"), "/");
}
function jump(){//親階層ディレクトリに移動
location.href = url2;
}
getDir(local,1)、数値が1で親階層ディレクトリを取得します。数値が2だと親の親、3だと親の親の親という感じになります。