「ピクチャー・イン・ピクチャー」効果 - IFRAME タグの使用についての説明

著者：Eve Cole 更新時間：2009-06-11 17:24:01

現在のウェブサイトを見ると、インターネットの速度が少し遅いですが、バナー、コラム画像、著作権など、ほぼすべてのページに同じようなものがたくさんあります。もちろん、統一されたウェブサイトのスタイルと広告効果が必要なためです。何も悪いことはありませんが、結局のところ、これらの「装飾された」ものによってユーザーの財布からお金がどんどん流出していきます。」これらの類似のものを 1 回ダウンロードした後はダウンロードする必要がなく、ダウンロードするだけで済むようにする方法はありますか。コンテンツが変更された領域の Web コンテンツは?
答えは間違いなく、Iframe タグを適用することです。

1. Iframe タグの使用<BR> Iframe というと「忘れられた隅」に放り込まれているかもしれませんが、その兄弟である Frame に関しては馴染みのないものではありません。 Frame タグは、ブラウザウィンドウ内に複数の HTML ファイルを表示することをマルチフレーム構造と呼びます。ここで、非常に現実的な状況に遭遇します。チュートリアルがある場合、それは 1 つずつセクションに分かれており、各ページの最後には「前のセクション」と「次のセクション」へのリンクがあります。ただし、その内容は異なります。各チュートリアルは異なります。また、ページの他の部分の内容は同じです。ページごとに愚かなページを作成するのはあまりにも退屈なので、他の部分を保持する方法はないか、とふと思いました。ページは変更されず、チュートリアルのみを作成します。ページ上下のリンクをクリックすると、チュートリアルのコンテンツ部分のみが変更され、他の部分は変更されません。この方法では、1 つは時間を節約し、もう 1 つは、将来的にチュートリアルに 3 つの長い変更と 2 つの短い変更が加えられることです。これも非常に便利であり、さらに重要なことに、広告バナー、列リストなどに影響を与えません。ほぼすべてのページに含まれるナビゲーションやその他のものは、一度ダウンロードされるだけで、その後ダウンロードされなくなります。
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 に設定されている場合、スクロールバーは自動的に表示されます。表示されます。
FrameBorder: 領域の境界線の幅。「ピクチャー・イン・ピクチャー」を隣接するコンテンツとブレンドするために、多くの場合 0 に設定されます。
例えば：
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200"scroll="no" Frameborder="0"></iframe>

2. 親フォームとフローティングフレームの相互制御<BR> スクリプト言語やオブジェクト階層では、Iframeを含むウィンドウを親フォーム、フローティングフレームを子フォームと呼び、この2つの関係を明確にします。親フォーム内の子フォームにアクセスしたり、親フォームから子フォームにアクセスしたりするには、プログラムでフォームにアクセスして制御する前に、オブジェクト階層を知っておく必要があるため、これは重要です。
1. 親フォームでサブフォーム内のオブジェクトにアクセスして制御する<BR> 親フォームでは、Iframe、つまりサブフォームはドキュメントオブジェクトの子オブジェクトであり、サブフォーム内のオブジェクトに直接アクセスできます。スクリプト。
ここで問題は、この Iframe をどのように制御するかということです。ここで、Iframe オブジェクトについて説明する必要があります。このタグに ID 属性を設定すると、Document Object Model 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>
</body>
</html>
ID 番号が myH1 の H1 タグ内のテキストを hello, my dear に変更したい場合は、次のように使用できます。
document.myH1.innerText="hello,my dear"(ドキュメントは省略可能)
example.htm ファイルでは、Iframe マークオブジェクトが指すサブフォームは一般的な DHTML オブジェクトモデルと一致しており、オブジェクトのアクセス制御方法も同じであるため、詳細は説明しません。
2. サブフォーム内の親フォーム内のオブジェクトにアクセスして制御します<BR> サブフォームでは、その親（親）オブジェクトを通じて親ウィンドウ内のオブジェクトにアクセスできます。
example.htm など:
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<iframe name="tt" src="frame1.htm" width="250" height="200"scrolling="no" Frameborder="0"></iframe>
<h1 id="myH2">こんにちは、妻</h1>
</body>
</html>
ID 番号 myH2 の Frame1.htm 内のタイトルテキストにアクセスし、それを「hello,my friends」に変更したい場合は、次のように記述できます:parent.myH2.innerText="hello,my friends"
ここで、親オブジェクトは現在のフォーム (example.htm が配置されているフォーム) を表します。子フォーム内の親フォーム内のオブジェクトにアクセスするには、例外なく親オブジェクトを介して行われます。
iframe は別の HTML ファイルに埋め込まれていますが、比較的独立した状態を保っており、単一の HTML の特性はフローティングフレームにも当てはまります。
想像してみてください。Iframe タグを使用すると、変更されていないコンテンツを Iframe として表現できます。これは、プログラミングのプロセスや関数に似ていて、非常に面倒です。手作業が省けます！さらに、非常に重要なことですが、レイアウトを調整するために各ページを変更する代わりに、1 つの親フォームのレイアウトを変更するだけで済むため、ページの変更がより容易になります。
注意すべき点の 1 つは、Nestscape ブラウザは Iframe タグをサポートしていないということですが、今日の IE の世界では、Iframe タグはそれ自体 (Web サイト) のためだけでなく、広く使用されているようです。ネチズンにとってもインターネット料金を節約できるのはなぜでしょうか。