インラインフレーム内を変更してみる

HOME
更新日:2017.03.02
HOMEJavaScript入門 > インラインフレームのリンク指定

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

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

リンク変更のサンプル

ではHTMLのヘッダーに、以下のように記入してみて下さい。

<script>

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

</script>

次いで、body内に以下のソースを書き込みましょう。

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

<iframe src="http://pori2.net/" name="waku"
 width="100%" height="80%"></iframe>

サンプル(別窓)

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

リンク変更の仕組み

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

最初は関数ifrの宣言をしています(関数名はiframeの略号のつもり)。 引数jpURLを指定し、ここにリンク先を記入するようにしています。

関数内は1行だけです。最初のwakuというのは、 インラインフレームのname属性で指定した値です。 該当のインラインフレームのリンク先(location)に、jpURLを指定します。 locationをlocation.hrefにしてもOKです。

あとはaタグ内で関数ifrを呼び出して、 引数にパズルの部屋のURLを指定してやっています。 クリックすると、パズルの部屋に飛びます。