ブログデザイン備忘録 ~転送制御、リンク情報参照など

　今回はJavascript関数のうち転送制御やリンク情報表示に関するものについて紹介していく。なお実行サンプルについてはChromeでは確認済だがブラウザによっては動作しないものがあるかもしれない。

1. 転送制御など

history.back()は1つ前のページに戻る、ブラウザの前のページに戻ると同じ機能となる。 <a>タグに埋め込むにはリンクのところでhref="javascript:history.back();"とする。

<a href="javascript:history.back();">一つ前のページへ戻る</a>

一つ前のページへ戻る

逆に次のページに進むにはhistory.forward()を用いて

<a href="javascript:history.forward();">一つ先のページへ進む</a>

一つ先のページへ進む

また、２つ前、2つ先など任意回数の前後のページにするにはhistory.go(num)を用いる。numを正の数を入れると先、負の数を入れると前に戻る。ここでは-1として1つ前に戻るという例を示す。

<a href="javascript:history.go(-1);">一つ前のページへ戻る</a>

一つ前のページへ戻る

ページのリロード、ブラウザのページの更新を行うにはlocation.reload()を用いる。

<button type="button" onClick=location.reload()>リロードボタン</button>

リロードボタン

指定のページに移動するには、locarion.replace("URLアドレス")で転送する。ただし<a>タグと違って履歴が残らないので1つ前のページに戻るが効かない。

<button type="button" onClick=location.replace("https://atatat.hatenablog.com/")>HOMEへ転送</button>

HOMEへ転送

2. ページ、リンク情報参照

ブラウザに表示された履歴の数を表示するには、history.lengthを用いる。例えば

<script>
document.write ("履歴の数:"+history.length);
</script>

ページのURLなどの情報を取得するにはlocation.*として以下のように指定する

• location.href: ページURL
• location.protocol:ページURLのプロトコル
• location.host:ページURLのホスト名
• location.hostname:ページURLのホスト情報
• location.port:ページURLのポート番号
• location.path:ページURLのパス名
• location.search:ページURLのサーチ情報
• location.hash:ページURLのハッシュ部分

<script>
document.write("<div>location.hrefは「" + location.href + "」</div>");
document.write("<div>location.protocolは「" + location.protocol + "」</div>");
document.write("<div>location.hostnameは「" + location.hostname + "」</div>");
document.write("<div>location.hostは「" + location.host + "」</div>");
document.write("<div>location.portは「" + location.port + "」</div>");
document.write("<div>location.pathnameは「" + location.pathname + "」</div>");
document.write("<div>location.searchは「" + location.search + "」</div>");
document.write("<div>location.hashは「" + location.hash + "」</div>");
</script>

このページでの実行結果は:

リンク先のURLなどの情報を取得するにはdocument.link.*を用いる。

ABOUTへリンク

上記ABOUTへのリンク先のURLの情報は、document.getElementByIdでlinkObjを取得し、linkObj.hrefなどとして情報を表示する。 document.link.targetはtarget属性(_blankなど)を表示するが、それ以外はlocationと表示する内容は同じである。

<script>
var linkObj = document.getElementById("testlink");
document.write("<div>hrefは「" + linkObj.href + "」</div>");
document.write("<div>targetは「" + linkObj.target + "」</div>");
document.write("<div>protocolは「" + linkObj.protocol + "」</div>");
document.write("<div>hostnameは「" + linkObj.hostname + "」</div>");
document.write("<div>hostは「" + linkObj.host + "」</div>");
document.write("<div>portは「" + linkObj.port + "」</div>");
document.write("<div>pathnameは「" + linkObj.pathname + "」</div>");
document.write("<div>searchは「" + linkObj.search + "」</div>");
document.write("<div>hashは「" + linkObj.hash + "」</div>");
</script>

上記ABOUTへのリンク先のURLの情報表示の実行結果は:

このページのリンク数を表示するにはdocument.links.lengthで取得できる。

<script>
document.write ("リンクの数:"+document.links.length);
</script>

3. まとめ

　今回は転送制御として履歴ページへの移動、ページ更新やURL,プロトコル,ホスト名などのページやリンク先の情報表示に関するJavascript関数について紹介した。