HTML iframe 使い方まとめ集_HTML/Xhtml_Webページ制作

Iframe の使用状況分析


フレーム周囲のエッジの幅を設定します
FRAMEBODER

スクロール バーの有無 (YES、NO、 AUTO )
SRC

IFRAME で呼び出されるファイルまたは画像を指定します (HTML、HTM、GIF、JPEG、JPG、PNG、 TXT、*.*)
「ピクチャー・イン・ピクチャー」効果 -- IFRAME タグの使用について説明
今日の Web サイトを見ると、インターネットの速度は少し遅いですが、ほぼすべてのページにバナーを表示する必要があります。もちろん、Webサイトのスタイルの統一や広告効果の必要性から、似たようなものが多くても問題ないのですが、結局のところ、こうした「装飾」によってユーザーの財布はどんどん減っていきます。これを可能にする方法はありますか? これらの類似したものを一度ダウンロードした後は、再度ダウンロードする必要はありませんが、コンテンツ領域が変更された Web ページのコンテンツのみがダウンロードされます。
答えは間違いなく、Iframe タグを適用することです。
1. Iframe タグの使用
Iframe というと「忘れられた隅」に放り込まれているかもしれませんが、その兄弟である Frame に関しては馴染みのないものではありません。 Frame タグは、ブラウザウィンドウ内に複数の HTML ファイルを表示することをマルチフレーム構造と呼びます。ここで、非常に現実的な状況に遭遇します。チュートリアルがある場合、それは 1 つずつセクションに分かれており、各ページの最後には「前のセクション」と「次のセクション」へのリンクがあります。ただし、その内容は異なります。各チュートリアルは異なります。また、ページの他の部分の内容は同じです。ページごとに愚かなページを作成するのはあまりにも退屈なので、他の部分を保持する方法はないか、とふと思いました。ページは変更されず、チュートリアルのみを作成します。ページ上下のリンクをクリックすると、チュートリアルのコンテンツ部分のみが変更され、他の部分は変更されません。この方法では、1 つは時間を節約し、もう 1 つは、将来的にチュートリアルに 3 つの長い変更と 2 つの短い変更が加えられることです。これも非常に便利であり、さらに重要なことに、広告バナーや列リストなどに影響を与えません。ほぼすべてのページに含まれるナビゲーションやその他のものは、一度ダウンロードされるだけで、その後ダウンロードされなくなります。 iframe タグはフローティング フレーム タグとも呼ばれ、HTML 表示に HTML ドキュメントを埋め込むために使用できます。 Frame タグと異なる最大の特徴は、このタグで参照される HTML ファイルが他の HTML ファイルから独立して表示されるのではなく、HTML ファイルに直接埋め込まれ、HTML ファイルの内容と一体化して全体として表示されることです。さらに、コンテンツを繰り返し記述することなく、同じコンテンツをページ上に複数回表示することもできます。これは、テレビの「ピクチャー・イン・ピクチャー」です。
次に、Iframe タグの使用について説明します。
Iframe タグの使用形式は次のとおりです:

コードをコピーします

コードは次のとおりです:

src: ファイル パスは HTML ファイル、テキスト、ASP などです。
width、height: 「ピクチャーインピクチャー」領域の幅と高さ。
scrolling: 指定された場合SRC の HTML ファイルが指定された領域にあります。スクロール オプションが表示されていないか完了している場合、[自動] に設定されている場合はスクロール バーは表示されません。[はい] に設定されている場合、スクロール バーは自動的に表示されます。
FrameBorder: ピクチャインピクチャを行うための領域の境界線の幅。通常は 0 に設定されます。
例:

コードをコピー

コードは次のとおりです:

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

,my Boy



ID 番号 myH1 のテキストを hello に変更したい場合、親愛なる、それは使用できます:

document.myH1.innerText="hello,my dear" (ドキュメントは省略可能)
example.htm ファイルでは、Iframe タグ オブジェクトが指すサブフォームは次のとおりです。一般的な DHTML オブジェクト モデルと一致します。オブジェクト アクセス制御メソッドは同じであるため、再度説明しません。
2. サブフォーム内の親フォーム内のオブジェクトにアクセスして制御します。
サブフォームでは、その親 (親) オブジェクトを通じて親ウィンドウ内のオブジェクトにアクセスできます。
example.htm など:

コードをコピーコードは次のとおりです:

&lt ;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 タグは、それ自体のためだけでなく、広く使用されています。ウェブサイト）だけでなく、ネットユーザーにとってもインターネット料金を節約できるのはなぜでしょうか。
例

コードをコピー

コードは次のとおりです。

iframe>

2 ::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::
iframe 使用後, スクロールバーが美しくないことがわかり、画像を2枚使用して置き換えたいのですが、
どのように実装すればよいでしょうか？

答え:
Web ページの





を次のコードに置き換えます。 コードをコピーします

コードは次のとおりです。以下のように:

関数スクロール(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop 温度;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}

文字
文字

文字

文字

文字

内部フレーム Iframe の使用
use Iframe は、単一テーブル内で外部ファイルを使用でき、非常に役立ちます。
Iframe マークの使用形式は次のとおりです:

代打代打:

&gt ;
src：文書の経路、HTML 文書でもよいし、文書、ASP などでもよい;
幅、高さ：「内部フレーム」領域の高さ;
スクロール:当 SRC の指定された HTML指定された領域にある文は不完全な場合、動的な選択があり、NO に設定されている場合は、動的な条項が表示されません。Auto の場合、自動: 自動的に動的な条項が表示されます。Yes の場合、表示されます。
FrameBorder: 「内部フレーム」とその近くのコンテンツを融合させるために、通常は 0 に設定されます。
name: フレームの名前。
例:

父フレームが内部フレームを制御する場合、target="フレームの名前" を使用して制御できます。
IFrame は文字を省略することもできます。さらに、他のネットワーク要素が文字列を変換できます。IFrame のみを使用するプロパティの 1 つにより、IFrame をテキスト エディタにすることができます。