menu
menu

JavaScriptで親階層にもどるボタン | Webデザインラボ

キーワード検索

8月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 5↑) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) CSSだけでドロップダウンメニュー
  4. ( 2↓) HTML5・ページ作成の基本
  5. ( 4↓) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 7-) JavaScriptで新しいウィンドウを開く
  8. ( 9↑) CSS3のdisplay:tableとdisplay:table-cellでレイアウト
  9. (-↑) Windows 10にApache2.4 VC11をインストール
  10. ( 8↓) jQueryでブロック要素の表示非表示(トグルボタン)
  • facebook0
  • はてなブックマーク0
  • Google+0
  • Pocket1
  • Twitter

JavaScriptで親階層にもどるボタン

  • Labs

JavaScript

こんにちは(・∀・)

 前回ご紹介しました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だと親の親の親という感じになります。


関連リンク

 JavaScriptで前のページにもどるボタン

  • facebook0
  • はてなブックマーク0
  • Google+0
  • Pocket1
  • Twitter