インラインフレームのリンク設定JavaScript入門

インラインフレームのリンク変更のサンプル

HTMLに、以下のように記入してみましょう。

<a href="JavaScript:ifr('https://pazru.net/puzzle/')">パズルの部屋へ</a>
<br>

<iframe src="https://pazru.net/" name="waku"></iframe>


<script>

function ifr(jpURL){
  waku.location = jpURL;
}

</script>

サンプル（別窓）

サンプルをご覧下さい。最初はうちのサイトのTOPページが表示されていますが、「パズルの部屋へ」というリンクを押すと、パズルの部屋が表示されます。インラインフレーム内のリンク先が変更されたからです。

iframeのリンク変更の仕組み

では上記のソースを詳しく見ていきましょう。

<a href="JavaScript:ifr('https://pazru.net/puzzle/')">パズルの部屋へ</a>

最初の行は、aタグを使って関数ifr()を呼び出しています。関数のカッコ内の引数には当サイトのパズルの部屋のURLを指定しています。

<iframe src="https://pazru.net/" name="waku"></iframe>

次にiframeタグを設置しました。初期段階で当サイトのトップページを表示しています。またname属性を指定し、値を「waku」にしています。

function ifr(jpURL){
  waku.location = jpURL;
}

そしてJavaScript部分です。関数ifr()を記述しています。関数内は１行だけです。最初のwakuというのは、 インラインフレームのname属性で指定した値です。 該当のインラインフレームのリンク先（location）に、引数jpURLで指定された値を代入します。

aタグから関数ifrを呼び出すと、インラインフレームにパズルの部屋のページが表示されます。