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

更新日:2018.09.03
  1. HOME
  2. JavaScript入門
  3. インラインフレームのリンク設定

インラインフレームに表示するサイトURLを変更する方法について見ていきましょう。 JavaScriptを用いると、 インラインフレーム内のURLを自由に変更できます。 ただし他人のサイトを表示するのはご法度なので、 あくまで自分のサイト内のページに留めておきましょう。

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

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()を記述しています。関数内は1行だけです。最初のwakuというのは、 インラインフレームのname属性で指定した値です。 該当のインラインフレームのリンク先(location)に、引数jpURLで指定された値を代入します。

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