IframeとFRAMEの違いの分析

1. Iframe タグの使用<br />Iframe については、「忘れられた隅」に放り込んでいるかもしれませんが、その兄弟である Frame についてはよくご存知でしょう。 Frame タグはフレームタグです。マルチフレーム構造とは、1 つのブラウザウィンドウに複数の HTML ファイルを表示することです。ここで、非常に現実的な状況に遭遇します。たとえば、チュートリアルがあり、各ページの最後に「前のセクション」と「次のセクション」のリンクがあり、セクションごとに提示されています。各チュートリアルのコンテンツが異なることを除けば、ページの残りのコンテンツは同じです。1つずつ愚かなページを作成すると、あまりにも退屈に思えます。このとき、突然アイデアが浮かびました。ページの残りの部分は変更せず、チュートリアルのみを他のコンテンツのないコンテンツページのページにする方法があれば、上下のページリンクをクリックすると、チュートリアルコンテンツ部分のみが変更され、残りは変更されません。このようにすると、一方では時間が節約され、他方では、将来チュートリアルに変更があった場合でも、チーム全体に影響を与えることなく非常に便利です。さらに重要なのは、ほとんどすべてのページにある広告バナー、列リスト、ナビゲーションなどのものは、一度だけダウンロードされ、その後は再度ダウンロードされないことです。
フローティングフレームタグとも呼ばれる Iframe タグを使用すると、HTML ドキュメントを HTML ドキュメント内に埋め込んで表示できます。 Frame タグとの最大の違いは、このタグが参照する HTML ファイルが他の HTML ファイルから独立して表示されるのではなく、HTML ファイルに直接埋め込まれ、この HTML ファイルの内容と統合されて全体となることです。また、同じ内容をページ内に複数回表示することができ、内容を繰り返す必要がありません。わかりやすい比喩としては、「ピクチャーインピクチャー」テレビが挙げられます。
それでは、iframe タグの使用について説明します。
Iframe タグの形式は次のとおりです。
<iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src: ファイルのパス。HTML ファイル、テキスト、ASP などになります。
幅、高さ: 「ピクチャーインピクチャー」領域の幅と高さ。
スクロール: SRC で指定された HTML ファイルが指定領域内に完全に表示できない場合、スクロールオプションを NO に設定するとスクロールバーは表示されません。Auto に設定すると、スクロールバーが自動的に表示されます。Yes に設定すると、表示されます。
FrameBorder: 領域の境界の幅。「ピクチャーインピクチャー」を隣接するコンテンツと融合させるため、0 に設定されることが多いです。
例えば：
<iframe src="http://netschool.cpcw.com/homepage" 幅="250" 高さ="200" スクロール="なし" フレームボーダー="0"></iframe>
2. 親フォームとフローティングフレームの相互制御<br />スクリプト言語とオブジェクト階層では、Iframe を含むウィンドウを親フォームと呼び、フローティングフレームを子フォームと呼びます。親フォームで子フォームにアクセスするには、またはその逆を行うために、プログラムを通じてフォームにアクセスして制御するために、オブジェクト階層を理解する必要があるため、両者の関係を理解することが重要です。
1. 親フォームで子フォームのオブジェクトにアクセスして制御します。親フォームでは、Iframe、つまり子フォームはドキュメントオブジェクトの子オブジェクトです。子フォームのオブジェクトには、スクリプトから直接アクセスできます。
ここで疑問が残ります。この Iframe をどのように制御するかということです。ここでは Iframe オブジェクトについて説明する必要があります。このタグの ID 属性を設定すると、ドキュメントオブジェクトモデル DOM を通じて、Iframe に含まれる HTML に対して一連の制御を実行できます。
たとえば、test.htm ファイルを example.htm に埋め込み、test.htm 内のいくつかのタグオブジェクトを制御します。
<iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm ファイルのコードは次のとおりです。
<html>
<本文>
<h1 id="myH1">こんにちは、息子よ</h1>
</本文>
</html>
ID 番号が myH1 である H1 タグ内のテキストを hello, my dear に変更したい場合は、次のようにします。
document.myH1.innerText="hello,my dear" (document は省略可能)
example.htm ファイルでは、Iframe タグオブジェクトが指すサブウィンドウは一般的な DHTML オブジェクトモデルと一致しており、オブジェクトアクセス制御方法も同じであるため、重複しません。
2. 子ウィンドウで親ウィンドウのオブジェクトにアクセスして制御します。子ウィンドウでは、親オブジェクトを介して親ウィンドウのオブジェクトにアクセスできます。
たとえば、example.htm:
<html>
<body onclick="アラート(tt.myH1.innerHTML)">
<iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">こんにちは、妻</h1>
</本文>
</html>
frame1.htm の ID 番号 myH2 のタイトルテキストにアクセスし、それを「hello, my friend」に変更する場合は、次のように記述します。
parent.myH2.innerText="こんにちは、私の友達"
ここで、親オブジェクトは現在のウィンドウ (example.htm が配置されているウィンドウ) を表します。子ウィンドウから親ウィンドウのオブジェクトにアクセスするには、例外なく親オブジェクトを使用する必要があります。
Iframe は別の HTML ファイルに埋め込まれていますが、比較的独立しており、「独立した王国」です。単一の HTML ファイルの機能は、フローティングフレームにも適用されます。
Iframe タグを使用すると、変更されないコンテンツを Iframe で表現できるため、同じコンテンツを書き換える必要がないことを想像してみてください。これはプログラミングのプロセスや関数に少し似ており、面倒な手作業を大幅に節約できます。また、重要なのは、レイアウトを調整するために各ページを変更するのではなく、親フォームのレイアウトを変更するだけで済むため、ページの変更がより実行可能になることです。
注目すべき点の 1 つは、Nestscape ブラウザが Iframe タグをサポートしていないことですが、IE が主流となっている今日の世界では、これは大した問題ではないようです。Iframe タグを広く使用することは、あなた自身 (Web サイト) に利益をもたらすだけでなく、ネットユーザーのインターネット料金を節約することにもなります。なぜそうしないのでしょうか。
フローティング FRAME は HTML4.0 仕様の定義であり、現在のすべてのブラウザでサポートされています。
FRAMESET で表されるパーティションとは異なり、フローティング FRAME は組み込みオブジェクトとして Web ページ上に存在し、そのスタイルはページ上のグラフィックやアプレットのようなものです。フローティング FRAME は <IFRAME> タグを使用します。このタグには、name、src、marginwidth、marginheight、FRAMEborder、scrolling など、<FRAME> と同じ属性設定がほとんどあります。同時に、グラフィックスやアプレットと同じ高さ、幅、配置属性も持っています。
さらに、フローティング FRAME は通常の FRAME と同じターゲット原則に従います。つまり、名前で指定できます。この原則は、あらゆるタイプのフレーム内のフローティングフレームに適用され、その逆も同様です。フローティング FRAME 内のターゲットのないリンクはそれ自体を指しますが、_parent リンクは <IFRAME> を含むドキュメントが配置されている FRAME またはウィンドウを指します。例えば：
<IFRAME name="フローター" src="start.htm" width=150 height=200 hspace=10 align=left>
<IMG src="Images/noFRAME.gif" alt="フローティングフレームは表示されません"
幅=150 高さ=200 hspace=10 位置揃え=右
</IFRAME><BR>
<A href="one.htm" target="floater">one.htm を表示</A><P>
<A href="two.htm" target="floater">two.htm を表示</A><P>
<A href="start.htm" target="floater">start.htm を戻す</A>
<IFRAME> タグをサポートするブラウザでは、<IFRAME> と </IFRAME> の間のコンテンツはすべて無視されることに注意してください。それ以外の場合は、現在のブラウザが<IFRAME>をサポートしていないことを説明するコンテンツが表示されます。

<<: Tomcat が localhost に通常アクセスすると 404 を報告する問題の解決方法

>>: 5つのCSSスクロール天井実装方法の比較（パフォーマンス向上版）