location.href(リンク)JavaScript入門

  1. HOME
  2. JavaScript入門
  3. location.href(リンク)

ここから、リンク関係のJavaScriptについて解説していきます。 まず始めは、普通にリンクを貼る方法です。 <a href="">と動作は同じです。 FORMのボタンにリンク指定したりする場合に使います。

location.hrefの記述

別ページに移動するには、以下のように記述します。

location.href="URL"
指定したURLへジャンプする
<script>

function jump(){
  if (confirm("トップページに戻りますか?")==true)
    //OKならTOPページにジャンプさせる
    location.href = "https://www.pazru.net/";
}

</script>

<input type="button" name="link" value="TOPへ" onclick="jump()">

サンプル(別窓)

上記のサンプルは、関数jump()を作成しています。 confirmでリンク先にジャンプするか確認するダイアログを表示します。

確認ダイアログでOKが押された場合、location.href=で指定したURLにジャンプします。 URLは文字列なので、クォーテーションで囲む必要があります。

最後にボタンを配置し、onclickイベントで関数lump()を呼び出します。

インラインフレームの場合

インラインフレームの場合は、location.hrefを使ってフレームを解除することができます。 以下のように先頭に文字を付け足します。

top.location.href="URL"
全フレームを解除します
parent.location.href="URL"
親フレームを解除します

HTMLのtarget属性に指定する値を思い浮かべれば、簡単だと思います。 このようにlocation.hrefはHTMLのAタグと同様の働きをさせることができます。

location.hrefは単独で用いることもあれば、 いろいろな処理と組み合わせて用いることもできます。 例えばクイズを作ったとしましょう。 全問正解するとパスワードが載せられた特定のページにジャンプさせたりすることができます。 このように使い道は色々とあるので、しっかり覚えて下さい。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers