JSP 埋め込み Web コンテンツ -- iframe

著者：Eve Cole 更新時間：2009-07-03 16:53:45

Zzzzz~ は巻く可能性があります

<Iframe src="/URL" width="x" height="x"scrolling="[OPTION]" Frameborder="x"></iframe>
src: ファイルのパス。HTML ファイル、テキスト、ASP などを指定できます。
幅、高さ: 「ピクチャー・イン・ピクチャー」領域の幅と高さ。
スクロール: SRC の指定された HTML ファイルが指定された領域に表示されていない場合、スクロールオプションが NO に設定されている場合、スクロールバーは表示されません。Auto に設定されている場合、スクロールバーは自動的に表示されます。表示されます。
Frameborder: 領域の境界線の幅。「ピクチャー・イン・ピクチャー」を隣接するコンテンツとブレンドするために、多くの場合 0 に設定されます。

例:

ウィンドウとフローティングの間フレームスクリプト言語およびオブジェクト階層では、Iframe を含むウィンドウを親フォーム、フローティングフレームを子フォームと呼びます。Iframe を制御する必要があるため、両者の関係を明確にすることが重要です。親フォームにアクセスする場合、またはその逆の場合は、プログラムを通じてフォームにアクセスして制御する前に、オブジェクト階層を理解しておく必要があります。

1. 親フォーム内のサブフォーム内のオブジェクトにアクセスして制御する親フォームでは、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. 子フォーム内の親フォーム内のオブジェクトにアクセスして制御します。子フォームでは、その親 (親) オブジェクトを通じて親ウィンドウ内のオブジェクトにアクセスできます。
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>
Frame1.htm 内のタイトルテキストに ID 番号 myH2 でアクセスし、それを「hello, my friends」に変更したい場合は、次のように記述できます。
parent.myH2.innerText="こんにちは、友達"
ここで、親オブジェクトは現在のフォーム (example.htm が配置されているフォーム) を表します。子フォーム内の親フォーム内のオブジェクトにアクセスするには、例外なく親オブジェクトを介して行われます。

iframe は別の HTML ファイルに埋め込まれていますが、比較的独立した状態を保っており、単一の HTML の特性はフローティングフレームにも当てはまります。

想像してみてください。Iframe タグを使用すると、変更されていないコンテンツを Iframe として表現できます。これは、プログラミングのプロセスや関数に似ていて、非常に面倒です。手作業が省けます！さらに、非常に重要なことですが、レイアウトを調整するために各ページを変更する代わりに、1 つの親フォームのレイアウトを変更するだけで済むため、ページの変更がより容易になります。
Nestscape 6.0 より前のバージョンでは Iframe タグがサポートされていないことに注意してください。

例:

< IFRAME フレーム境界=0 フレーム間隔=0 高さ=25 マージン高さ=0 マージン幅=0 スクロール=いいえ
name=main src="/bgm/bgm.html" width=300></IFRAME>

iframeを使ってみたらスクロールバーが美しくないので、代わりに画像を2枚使いたいと思います↑↓
これはどのように達成されるべきでしょうか?

答え：
Web ページの <title>..</title> を次のコードに置き換えます。
<スクリプト言語="javascript">
関数スクロール(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
if (temp==0) が戻る;
setTimeout("スクロール(一時)",80);
}
</スクリプト>
<テーブル幅="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width:
1px,1px,1px,1px;">
テキスト<BR> テキスト<BR>
テキスト<BR>
テキスト<BR>
言葉
<BR>
<BR>
</DIV>
</TD>
< TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouseover="scroll(-1)" onmouseout="scroll(0) " onmousedown="scroll (-3)" BORDER="0" ALT="マウスを押すと速くなります。"></TD>
</TR>
<TR>
< TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER= "0" WIDTH ="15" HEIGHT="21" ALT="マウスを押し下げると速くなります!"></TD>
</TR>
</TABLE>

次のコードは、IFrame の高さ適応型を実装できます。つまり、スクロールバーがページと IFrame に同時に表示されるのを避けるために、ページの長さに自動的に適応します。
ソースコードは以下のとおりです

//ページの高さに応じて高さを自動的に調整する iframe の名前のリストを入力します
//各 iframe の ID をカンマで区切ります。例: ["myframe1", "myframe2"]。フォームは 1 つだけであるため、カンマは必要ありません。

//iframeのIDを定義する
var iframeids=["test"]

//ユーザーのブラウザが iframe をサポートしていない場合、iframe を非表示にするかどうか。yes は非表示を意味し、no は非表示を意味します
var iframehide="yes"

関数 dyniframesize()
{
var dyniframe=新しい配列()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//iframe の高さを自動的に調整する
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="ブロック"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //ユーザーのブラウザが NetScape の場合
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //ユーザーのブラウザが IE の場合
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//設定されたパラメータに従って、iframe をサポートしていないブラウザの表示の問題を処理します
if ((document.all || document.getElementById) && iframehide=="no")
{
vartempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
Tempobj.style.display="ブロック"
}
}
if

(window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
それ以外
window.onload=dyniframesize
</script>

参照値のあるその他の URL:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //Webページに埋め込まれたiframeの使用法
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //IFRAME オブジェクト
http://www.hoyo.idv.tw/web-program/html/iframe.htm //インラインフレーム iframe