iframe内のページを変更する

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. iframe内のページを変更する

前のページで、iframeの使い方を見ました。 このページでは、iframe内のページを変更する方法を見ていきます。 また、iframeを解除して親ページにリンク先を表示する方法も解説致します。

iframe内を変更するHTMLタグ

まず、iframe内のページを変更するための方法を見ておきましょう。

<iframe name="★"></iframe>
iframeにname属性を付け、フレーム名を指定します。
<a target="★" href="">
フレーム名「★」が付いたiframe内に、リンク先を表示します。

次はiframe内のページから、フレームを解除して親ページにリンク先を表示する方法です。

<a target="_parent" href="">
iframe内から、iframeを解除して親ページにリンク先を表示します。
<a target="_top" href="">
何重にもなっているiframe内から、全てのiframeを解除して一番上のページにリンク先を表示します。

iframeでのリンクのサンプル

まずは、temp.htmlを開いて、「clear.html」という名前でifmフォルダに保存し、 body内に以下のように記述してください。

<a href="../index.html" target="_parent">iframeを解除</a>

続いて、前のページで作ったlesson1.htmlを開いて、 「lesson2.html」というファイル名に変更して保存して下さい。 そして箇条書きの部分に以下のようにリンクを張ってみましょう。 iframeにフレーム名を付けるのも忘れないようにします。

<ul>
<li><a href="../picture/lesson1.html" target="ifr">画像</a></li>
<li><a href="../table/lesson1.html" target="ifr">テーブル</a></li>
<li><a href="../list/lesson1.html" target="ifr">リスト</a></li>
<li><a href="clear.html" target="ifr">フレーム解除</a></li>
</ul>

<iframe name="ifr" src="../index.html" height="240"></iframe>

サンプル(別窓)

今回もサンプルは別窓で開きます。 リンクをクリックすると、iframe内に表示されることを確認なさってください。

「フレーム解除」のリンクをクリックすると、clear.htmlがiframe内に表示されます。 そこにある「iframeを解除」と書かれたリンクをクリックしてみましょう。 iframeの一つ上のページが、目次(index.html)に移動すると思います。

NINJABUTTON