ホームページ作成講座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）に移動すると思います。