ホームページ >ウェブフロントエンド >htmlチュートリアル >IframeとFRAME_HTML/Xhtml_Webページ制作の違いの分析

IframeとFRAME_HTML/Xhtml_Webページ制作の違いの分析

WBOY
WBOYオリジナル
2016-05-16 16:41:461384ブラウズ
1. Iframe タグの使用
Iframe に関して言えば、「忘れられた隅」に放り込まれているかもしれませんが、その兄弟である Frame に関しては馴染みのないものではありません。 Frame タグは、ブラウザウィンドウ内に複数の HTML ファイルを表示することをマルチフレーム構造と呼びます。ここで、非常に現実的な状況に遭遇します。チュートリアルがある場合、それは 1 つずつセクションに分かれており、各ページの最後には「前のセクション」と「次のセクション」へのリンクがあります。ただし、その内容は異なります。各チュートリアルは異なります。また、ページの他の部分の内容は同じです。ページごとに愚かなページを作成するのはあまりにも退屈なので、他の部分を保持する方法はないか、とふと思いました。ページは変更されず、チュートリアルのみを作成します。ページ上下のリンクをクリックすると、チュートリアルのコンテンツ部分のみが変更され、他の部分は変更されません。この方法では、1 つは時間を節約し、もう 1 つは、将来的にチュートリアルに 3 つの長い変更と 2 つの短い変更が加えられることです。これも非常に便利であり、さらに重要なことに、広告バナーや列リストなどに影響を与えません。ほぼすべてのページに含まれるナビゲーションやその他のものは、一度ダウンロードされるだけで、その後ダウンロードされなくなります。
iframe タグはフローティング フレーム タグとも呼ばれ、HTML 表示に HTML ドキュメントを埋め込むために使用できます。 Frame タグと異なる最大の特徴は、このタグで参照される HTML ファイルが他の HTML ファイルから独立して表示されるのではなく、HTML ファイルに直接埋め込まれ、HTML ファイルの内容と一体化して全体として表示されることです。さらに、コンテンツを繰り返し記述することなく、同じコンテンツをページ上に複数回表示することもできます。これは、テレビの「ピクチャー・イン・ピクチャー」です。
次に、Iframe タグの使用について説明します。
Iframe タグの形式は次のとおりです。

src: ファイルのパス (HTML ファイル、テキスト、ASP など)
幅、高さ。 : "draw "中絵" 領域の幅と高さ;
スクロール: SRC の指定された HTML ファイルが指定された領域に表示されない場合、スクロール オプションを NO に設定すると、スクロール バーは表示されません; Auto の場合: スクロール バーが自動的に表示されます。
FrameBorder: 隣接するコンテンツと「ピクチャ イン ピクチャ」の境界線を統合します。多くの場合、0 に設定されます。
例:

2. 親フォームとフローティングフレーム間の相互制御
スクリプト言語およびオブジェクトレベル (Iframe を含む) では、ウィンドウは親フォーム、フローティング フレームは子フォームと呼ばれます。親フォーム内で子フォームにアクセスしたり、その逆を行うには、オブジェクト階層を理解する必要があるため、この 2 つの関係を理解することが重要です。フォームにアクセスして制御するプログラムを渡すことができます。
1. 親フォームでサブフォーム内のオブジェクトにアクセスして制御する
親フォームでは、Iframe、つまりサブフォームがドキュメント オブジェクトの子オブジェクトであり、サブフォームに直接アクセスできます。のオブジェクト。
ここで、この Iframe をどのように制御するかという質問があります。ここでは、Iframe オブジェクトについて説明する必要があります。このタグに ID 属性を設定すると、Document Object Model DOM を通じて Iframe に含まれる HTML に対して一連の制御を実行できます。
たとえば、test.htm ファイルを example.htm に埋め込み、test.htm 内のいくつかのタグ オブジェクトを制御します。

test.htm ファイルのコードは次のとおりです:


hello, my boy




H1 タグ内のテキストを ID 番号で変更したい場合myH1 から hello 、my dear、以下を使用できます:
document.myH1.innerText="hello, my dear" (document は省略可能)
example.htm ファイルでは、Iframe が指すサブフォームマーク オブジェクトは一般的なものと同じです。DHTML オブジェクト モデルは一貫しており、オブジェクトのアクセス制御方法も同じであるため、詳細は説明しません。
2. サブフォーム内の親フォーム内のオブジェクトにアクセスして制御します。
サブフォームでは、その親 (親) オブジェクトを通じて親ウィンドウ内のオブジェクトにアクセスできます。
example.htm など:



こんにちは、妻




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 タグは、それ自体のためだけでなく、広く使用されています。ウェブサイト)だけでなく、ネットユーザーにとってもインターネット料金を節約できるのはなぜでしょうか。
Floating FRAME は HTML4.0 仕様の定義であり、現在のブラウザーはそれをサポートしています。
FRAMESET で表されるパーティションとは異なり、フローティング FRAME は組み込みオブジェクトとして Web ページ上に存在し、そのスタイルはページ上のグラフィックやアプレットのようなものです。 Floating FRAME は

1 つ表示.htm


2 つ表示.htm


戻るstart .htm
の間のコンテンツはすべて無視されることに注意してください。それ以外の場合は、現在のブラウザが

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。