IframeとFRAMEの違いの分析
2022-01-30 16:28:42
I. Iframeタグの使用方法
Iframeタグはフレームタグであり、マルチフレーム構造と呼ばれるのは、1つのブラウザウィンドウに複数のHTMLファイルを表示することである。さて、非常に現実的な場面に遭遇しました。チュートリアルなどのセクションは、地面に、各ページの終わりには、"previous", "next" を行うためのセクションです。リンクは、チュートリアルの各セクションのコンテンツに加えて、異なっている、ページの残りの部分は、同じコンテンツは、ページがあまりにも面倒と思われる愚かなページを行うには、ページごとに、その後突然の思考、ページの残りの部分を変更しないようにする方法がある場合、唯一のコンテンツページのページにチュートリアル。他のコンテンツなしで、ページの上下のリンクをクリックすると、唯一のチュートリアル部分のコンテンツを変更すると、他のは、そのように、1つは時間を節約することです、他のは、チュートリアルが長いと短い変更を持っている場合、将来ですが、また非常に便利ではない、変更されないまま。
Iframeマークアップは、フローティングフレームマークアップとしても知られ、HTMLドキュメントをHTML表示に埋め込むために使用することができます。Frameマークアップとの違いは、このマークアップで参照されるHTMLファイルが他のHTMLファイルから独立して表示されるのではなく、HTMLファイルに直接埋め込むことができ、このHTMLファイルの内容が互いに統合されて全体となる点、さらに、内容を繰り返し記述しなくても同じ内容をページ内に複数回表示できること、視覚的に例えるなら、" picture in picture" TVが挙げられる。
では、Iframeタグの使い方について説明します。
Iframeタグを使用する際の書式は:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"> < ;/iframe>
src: ファイルへのパス。HTMLファイル、またはテキスト、ASPなど。
width, height: ピクチャー・イン・ピクチャー領域の幅と高さを指定します。
scrolling: 指定されたSRCのHTMLファイルが指定された領域に表示されない場合のスクロールオプション、NOに設定するとスクロールバーは表示されません、Autoに設定するとスクロールバーは自動的に表示されます、Yesに設定するとスクロールバーは表示されます。
FrameBorder: 領域の境界線の幅で、多くの場合、quot;ピクチャー・イン・ピクチャー"を隣接するコンテンツと調和させるために0に設定されます。
例えば
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"> </iframe>.Iframeを使用します。
II. 親フォームとフローティングフレーム間の相互制御
スクリプト言語とオブジェクト階層では、Iframeを含むウィンドウを親フォームと呼び、フローティングフレームを子フォームと呼びます。なぜなら、親フォームの中の子フォームにアクセスするため、あるいはその逆に、プログラムを通じてフォームにアクセスし制御するためには、オブジェクト階層を明確にする必要があるからです。
1. 親フォームから子フォームのオブジェクトにアクセスし、制御することができる
親フォームでは、子フォームであるIframeはドキュメントオブジェクトの子オブジェクトなので、スクリプトで子フォームのオブジェクトに直接アクセスすることができます。
さて、ここで疑問が生じます。すなわち、このIframeをどのように制御するかですが、ここではIframeオブジェクトについて説明する必要があります。このタグにIDプロパティを設定すると、Document Object Model DOMを通じて、Iframeに含まれるHTMLをさまざまに制御することができるようになります。
例えば、example.htm に test.htm ファイルを埋め込み、test.htm 内のマークアップオブジェクトの一部を制御する。
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"> </iframe>です。
test.htmファイルのコードは。
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
ID番号myH1のH1タグ内のテキストをhello,my dearに変更したい場合は、:
document.myH1.innerText="hello,my dear"（ここで、documentは省略可能です。）
example.htmファイルでは、Iframeタグのオブジェクトは、一般的なDHTMLのオブジェクトモデルと一致するサブフォームを参照して、同じようにオブジェクトへのアクセスを制御するために、それが繰り返されることはありません。
2、子フォームでアクセスし、親フォーム内のオブジェクトを制御するために
子フォームでは、親ウィンドウのオブジェクトに、その親、つまり親（2つの親）オブジェクトを通してアクセスすることができます。
example.htmのように。
<html>
<body onclick="alert(tt.myH1.innerHTML)">.Body。
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"> </iframe&rt;。
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
frame1.htmのID番号myH2のタイトルテキストにアクセスして、それを"hello,my friend"に変更するには、次のように記述します。
parent.myH2.innerText="hello,my friend"
ここで、親オブジェクトは現在のフォーム（example.htmがある場所）を表し、子フォームの親フォームのオブジェクトにアクセスするために、例外なく、親オブジェクトを介してそうするようにします。
Iframeは別のHTMLファイルに埋め込まれていますが、それは比較的独立したまま、"独立王国"ヨ単一のHTML内のフローティングフレームに適用されるのと同じ機能を備えています。
Iframeタグによって、Iframeとして変わらない内容を表現することができるため、プログラミングにおけるプロシージャや関数のように、同じ内容を何度も書く必要がなくなり、どれだけ退屈な手作業が省けるか、想像してみてください！？また、レイアウトの調整のために各ページを修正するのではなく、1つの親フォームのレイアウトを修正すればよいので、ページの修正がより現実的になることも重要なポイントです。
注意点としては、NestscapeブラウザはIframeマークアップをサポートしていませんが、昨今のIEの世界では、これは大きな問題ではないようで、Iframeマークアップの普及は、自分（ウェブサイト）のためだけでなく、インターネットユーザーの節約にもつながるようです。
フローティングFRAMEは、HTML4.0仕様の定義であり、現在のすべてのブラウザでサポートされています。
FRAMESETで表される分割された領域の外観とは異なり、フローティングFRAMEは、ウェブページに組み込まれたオブジェクトとして存在し、ページ上のグラフィックやアプレットのようにスタイルされています。フローティングFRAMEは、<FRAME> と同じ属性設定のほとんどを持つ、<IFRAME> タグを使用しています。
さらに、フローティングFRAMEは、通常のFRAMEと同じターゲットの原則に従います：その名前で指し示すことができます。この原則は、どちらのタイプのFRAMEでもフローティングFRAMEに適用されますし、その逆もまた同様です。tragetのないフローティングFRAME内のリンクはそれ自身を指し、_parentリンクは、<IFRAME>を含むドキュメントがあるFRAMEまたはウィンドウを指します。例えば
<IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left>
<IMG src="Images/noFRAME.gif" alt="フローティングFRAMEが見えません"
width=150 height=200 hspace=10 align=right>
</IFRAME><BR>
<A href="one.htm" target="floater">show one.htm</A><P>
<A href="two.htm" target="floater">Show two.htm</A><P>
<A href="start.htm" target="floater">bring back start.htm</A>
IFRAME>タグをサポートしているブラウザでは、<IFRAME> と </IFRAME> の間にあるコンテンツは無視されますので、ご注意ください。これは、現在のブラウザが<IFRAME>.をサポートしていないことの説明として使用することができます。
Iframeタグはフレームタグであり、マルチフレーム構造と呼ばれるのは、1つのブラウザウィンドウに複数のHTMLファイルを表示することである。さて、非常に現実的な場面に遭遇しました。チュートリアルなどのセクションは、地面に、各ページの終わりには、"previous", "next" を行うためのセクションです。リンクは、チュートリアルの各セクションのコンテンツに加えて、異なっている、ページの残りの部分は、同じコンテンツは、ページがあまりにも面倒と思われる愚かなページを行うには、ページごとに、その後突然の思考、ページの残りの部分を変更しないようにする方法がある場合、唯一のコンテンツページのページにチュートリアル。他のコンテンツなしで、ページの上下のリンクをクリックすると、唯一のチュートリアル部分のコンテンツを変更すると、他のは、そのように、1つは時間を節約することです、他のは、チュートリアルが長いと短い変更を持っている場合、将来ですが、また非常に便利ではない、変更されないまま。
Iframeマークアップは、フローティングフレームマークアップとしても知られ、HTMLドキュメントをHTML表示に埋め込むために使用することができます。Frameマークアップとの違いは、このマークアップで参照されるHTMLファイルが他のHTMLファイルから独立して表示されるのではなく、HTMLファイルに直接埋め込むことができ、このHTMLファイルの内容が互いに統合されて全体となる点、さらに、内容を繰り返し記述しなくても同じ内容をページ内に複数回表示できること、視覚的に例えるなら、" picture in picture" TVが挙げられる。
では、Iframeタグの使い方について説明します。
Iframeタグを使用する際の書式は:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"> < ;/iframe>
src: ファイルへのパス。HTMLファイル、またはテキスト、ASPなど。
width, height: ピクチャー・イン・ピクチャー領域の幅と高さを指定します。
scrolling: 指定されたSRCのHTMLファイルが指定された領域に表示されない場合のスクロールオプション、NOに設定するとスクロールバーは表示されません、Autoに設定するとスクロールバーは自動的に表示されます、Yesに設定するとスクロールバーは表示されます。
FrameBorder: 領域の境界線の幅で、多くの場合、quot;ピクチャー・イン・ピクチャー"を隣接するコンテンツと調和させるために0に設定されます。
例えば
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"> </iframe>.Iframeを使用します。
II. 親フォームとフローティングフレーム間の相互制御
スクリプト言語とオブジェクト階層では、Iframeを含むウィンドウを親フォームと呼び、フローティングフレームを子フォームと呼びます。なぜなら、親フォームの中の子フォームにアクセスするため、あるいはその逆に、プログラムを通じてフォームにアクセスし制御するためには、オブジェクト階層を明確にする必要があるからです。
1. 親フォームから子フォームのオブジェクトにアクセスし、制御することができる
親フォームでは、子フォームであるIframeはドキュメントオブジェクトの子オブジェクトなので、スクリプトで子フォームのオブジェクトに直接アクセスすることができます。
さて、ここで疑問が生じます。すなわち、このIframeをどのように制御するかですが、ここではIframeオブジェクトについて説明する必要があります。このタグにIDプロパティを設定すると、Document Object Model DOMを通じて、Iframeに含まれるHTMLをさまざまに制御することができるようになります。
例えば、example.htm に test.htm ファイルを埋め込み、test.htm 内のマークアップオブジェクトの一部を制御する。
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"> </iframe>です。
test.htmファイルのコードは。
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
ID番号myH1のH1タグ内のテキストをhello,my dearに変更したい場合は、:
document.myH1.innerText="hello,my dear"（ここで、documentは省略可能です。）
example.htmファイルでは、Iframeタグのオブジェクトは、一般的なDHTMLのオブジェクトモデルと一致するサブフォームを参照して、同じようにオブジェクトへのアクセスを制御するために、それが繰り返されることはありません。
2、子フォームでアクセスし、親フォーム内のオブジェクトを制御するために
子フォームでは、親ウィンドウのオブジェクトに、その親、つまり親（2つの親）オブジェクトを通してアクセスすることができます。
example.htmのように。
<html>
<body onclick="alert(tt.myH1.innerHTML)">.Body。
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"> </iframe&rt;。
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
frame1.htmのID番号myH2のタイトルテキストにアクセスして、それを"hello,my friend"に変更するには、次のように記述します。
parent.myH2.innerText="hello,my friend"
ここで、親オブジェクトは現在のフォーム（example.htmがある場所）を表し、子フォームの親フォームのオブジェクトにアクセスするために、例外なく、親オブジェクトを介してそうするようにします。
Iframeは別のHTMLファイルに埋め込まれていますが、それは比較的独立したまま、"独立王国"ヨ単一のHTML内のフローティングフレームに適用されるのと同じ機能を備えています。
Iframeタグによって、Iframeとして変わらない内容を表現することができるため、プログラミングにおけるプロシージャや関数のように、同じ内容を何度も書く必要がなくなり、どれだけ退屈な手作業が省けるか、想像してみてください！？また、レイアウトの調整のために各ページを修正するのではなく、1つの親フォームのレイアウトを修正すればよいので、ページの修正がより現実的になることも重要なポイントです。
注意点としては、NestscapeブラウザはIframeマークアップをサポートしていませんが、昨今のIEの世界では、これは大きな問題ではないようで、Iframeマークアップの普及は、自分（ウェブサイト）のためだけでなく、インターネットユーザーの節約にもつながるようです。
フローティングFRAMEは、HTML4.0仕様の定義であり、現在のすべてのブラウザでサポートされています。
FRAMESETで表される分割された領域の外観とは異なり、フローティングFRAMEは、ウェブページに組み込まれたオブジェクトとして存在し、ページ上のグラフィックやアプレットのようにスタイルされています。フローティングFRAMEは、<FRAME> と同じ属性設定のほとんどを持つ、<IFRAME> タグを使用しています。
さらに、フローティングFRAMEは、通常のFRAMEと同じターゲットの原則に従います：その名前で指し示すことができます。この原則は、どちらのタイプのFRAMEでもフローティングFRAMEに適用されますし、その逆もまた同様です。tragetのないフローティングFRAME内のリンクはそれ自身を指し、_parentリンクは、<IFRAME>を含むドキュメントがあるFRAMEまたはウィンドウを指します。例えば
<IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left>
<IMG src="Images/noFRAME.gif" alt="フローティングFRAMEが見えません"
width=150 height=200 hspace=10 align=right>
</IFRAME><BR>
<A href="one.htm" target="floater">show one.htm</A><P>
<A href="two.htm" target="floater">Show two.htm</A><P>
<A href="start.htm" target="floater">bring back start.htm</A>
IFRAME>タグをサポートしているブラウザでは、<IFRAME> と </IFRAME> の間にあるコンテンツは無視されますので、ご注意ください。これは、現在のブラウザが<IFRAME>.をサポートしていないことの説明として使用することができます。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン