ホームページ > 記事 > ウェブフロントエンド > htmlにおけるiframeタグの役割と活用術を詳しく解説
htmlにおけるiframeタグの役割と活用術を詳しく解説
- 黄舟オリジナル
- 2017-07-21 11:37:301289ブラウズ
現在のウェブサイトを見ると、インターネットの速度が少し遅いですが、ほぼすべてのページにバナー、コラム写真、著作権などの類似したものがたくさんあります。もちろん、ウェブサイトのスタイルと広告を統一する必要があるためです。効果としては何も問題はありませんが、結局のところ、これらの「装飾」的なものによってユーザーの財布からお金がどんどん流出していきます。コンテンツ領域が変更された Web ページのみをダウンロードします。コンテンツはどうですか?
答えは間違いなく、Iframeタグを適用することです！
1. Iframe タグの使用
Iframe に関して言えば、すでに「忘れられた隅」に放り込まれているかもしれませんが、その兄弟である Frame に関しては、馴染みのないものではありません。 。 Frameタグは、複数のHTMLファイルを1つのブラウザウィンドウに表示することをマルチフレーム構造と呼びます。 ここで、非常に現実的な状況に遭遇します。チュートリアルがある場合、それは 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 などのファイルのパス
幅、高さ: "Picture- in-picture" 領域の幅と高さ;
スクロール: SRC の指定された HTML ファイルが指定された領域に表示されない場合、スクロール オプション、NO に設定されている場合、スクロール バーは表示されません。自動の場合は、スクロール バーは表示されません。 : スクロール バーが自動的に表示されます。 はいの場合は表示されます。
FrameBorder: 隣接するコンテンツと「ピクチャー・イン・ピクチャー」をブレンドするために、多くの場合、次のように設定されます。 0.
例：
<Iframe src="http://www.webjx.com" width="250" height="200" scrolling="no" frameborder="0"></iframe>
2. 親フォームとフローティングフレームの相互制御
スクリプト言語やオブジェクト階層では、Iframeを含むウィンドウを親ウィンドウフォームと呼びます。フローティング フレームはサブフォームと呼ばれます。親フォーム内のサブフォームにアクセスしたり、その逆を行うには、フォームにアクセスして制御する前にオブジェクト階層を理解する必要があるため、この 2 つの関係を理解することが重要です。プログラム。 。
1. 親フォームでサブフォームのオブジェクトにアクセスして制御する
親フォームでは、Iframe またはサブフォームはドキュメント オブジェクトの子オブジェクトであり、スクリプト Access で直接使用できます。サブフォーム内のオブジェクト。
ここで、この 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 は省略可能) )
例 .htm ファイルでは、Iframe タグ オブジェクトが指すサブフォームは一般的な DHTML オブジェクト モデルと一致しており、オブジェクトのアクセス制御方法も同じであるため、詳細は説明しません。
2. 子フォームで親フォームのオブジェクトにアクセスして制御する
子フォームでは、その親（親）オブジェクトを通じて親ウィンドウ内のオブジェクトにアクセスできます。
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">hello,my wife</h1> </body> </html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？
以上がhtmlにおけるiframeタグの役割と活用術を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。