HTML iframe 使用状況の概要の収集

Iframe 使用状況の詳細な分析
<iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"></iframe>
<IFRAME> は、テキストまたはグラフィック用のフローティングフレームまたはコンテナーを設定するために使用されます。
国境
<IFRAME ボーダー="3"></IFRAME>
フレームの周囲の境界線の幅を設定します
フレームボーダー
<IFRAME フレームボード="0"></IFRAME>
境界線が 3 次元かどうかを設定します (0 = いいえ、1 = はい)
高さ、幅
<IFRAME 高さ="31" 幅="88"></IFRAME>
境界線の幅と高さを設定する
スクロール
<IFRAME スクロール="いいえ"></IFRAME>
スクロールバーはありますか (はい、いいえ、自動)
ＳＲＣ
<IFRAME SRC="GIRL.GIF"></IFRAME>
IFRAME で呼び出されるファイルまたは画像を指定します (HTML、HTM、GIF、JPEG、JPG、PNG、TXT、*.*)
「ピクチャーインピクチャー」効果 - IFRAME タグの使用について。現在の Web サイトを見ると、インターネットの速度が少し遅いですが、ほとんどすべてのページにバナー、コラム画像、著作権などの類似のものがたくさん配置されています。もちろん、統一された Web サイトのスタイルと広告効果の必要性は理解できますが、結局のところ、ユーザーの財布はこれらの「装飾」によって「ますます疲れ果てています」。一度ダウンロードした後、これらの類似のものを再ダウンロードしないようにし、コンテンツが変更された領域の Web ページコンテンツのみをダウンロードする方法はありますか?
答えは間違いなく、Iframe タグを使用することです。
1. Iframe タグの使用 Iframe については、ずっと前に「忘れられた隅」に放り込んでしまったかもしれませんが、その兄弟である Frame についてはよくご存知でしょう。 Frame タグはフレームタグです。マルチフレーム構造とは、1 つのブラウザウィンドウに複数の HTML ファイルを表示することです。ここで、非常に現実的な状況に遭遇します。たとえば、チュートリアルがあり、各ページの最後に「前のセクション」と「次のセクション」のリンクがあり、セクションごとに提示されています。各チュートリアルのコンテンツが異なることを除けば、ページの残りのコンテンツは同じです。1つずつ愚かなページを作成すると、あまりにも退屈に思えます。このとき、突然アイデアが浮かびました。ページの残りの部分は変更せず、チュートリアルのみを他のコンテンツのないコンテンツページのページにする方法があれば、上下のページリンクをクリックすると、チュートリアルコンテンツ部分のみが変更され、残りは変更されません。このようにすると、一方では時間が節約され、他方では、将来チュートリアルに変更があった場合でも、チーム全体に影響を与えることなく非常に便利です。さらに重要なのは、ほとんどすべてのページにある広告バナー、列リスト、ナビゲーションなどのものは、一度だけダウンロードされ、その後は再度ダウンロードされないことです。フローティングフレームタグとも呼ばれる Iframe タグを使用すると、HTML ドキュメントを HTML ドキュメント内に埋め込んで表示できます。 Frame タグとの最大の違いは、このタグが参照する HTML ファイルが他の HTML ファイルから独立して表示されるのではなく、HTML ファイルに直接埋め込まれ、この HTML ファイルの内容と統合されて全体となることです。また、同じ内容をページ内に複数回表示することができ、内容を繰り返す必要がありません。わかりやすい比喩としては、「ピクチャーインピクチャー」テレビが挙げられます。
それでは、iframe タグの使用について説明します。
Iframe タグの形式は次のとおりです。

コードをコピー

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

src: ファイルのパス。HTML ファイル、テキスト、ASP などになります。
幅、高さ: 「ピクチャーインピクチャー」領域の幅と高さ。
スクロール: SRC で指定された HTML ファイルが指定領域内に完全に表示できない場合、スクロールオプションを NO に設定するとスクロールバーは表示されません。Auto に設定すると、スクロールバーが自動的に表示されます。Yes に設定すると、表示されます。
FrameBorder: 領域の境界の幅。「ピクチャーインピクチャー」を隣接するコンテンツと融合させるため、0 に設定されることが多いです。
例えば：

コードをコピー

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

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

コードをコピー

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

ID 番号が myH1 である H1 タグ内のテキストを hello, my dear に変更したい場合は、次のようにします。
document.myH1.innerText="hello,my dear" (document は省略可能)
example.htm ファイルでは、Iframe タグオブジェクトが指すサブウィンドウは一般的な DHTML オブジェクトモデルと一致しており、オブジェクトアクセス制御方法も同じであるため、重複しません。
2. 子ウィンドウで親ウィンドウのオブジェクトにアクセスして制御します。子ウィンドウでは、親オブジェクトを介して親ウィンドウのオブジェクトにアクセスできます。
たとえば、example.htm:

コードをコピー

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

<html>
<body onclick="アラート(tt.myH1.innerHTML)">
<iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">こんにちは、妻</h1>
</本文>
</html>

frame1.htm の ID 番号 myH2 のタイトルテキストにアクセスし、それを「hello, my friend」に変更する場合は、次のように記述します。
parent.myH2.innerText="こんにちは、私の友達"
ここで、親オブジェクトは現在のウィンドウ (example.htm が配置されているウィンドウ) を表します。子ウィンドウから親ウィンドウのオブジェクトにアクセスするには、例外なく親オブジェクトを使用する必要があります。
Iframe は別の HTML ファイルに埋め込まれていますが、比較的独立しており、「独立した王国」です。単一の HTML ファイルの機能は、フローティングフレームにも適用されます。
Iframe タグを使用すると、変更されないコンテンツを Iframe で表現できるため、同じコンテンツを書き換える必要がないことを想像してみてください。これはプログラミングのプロセスや関数に少し似ており、面倒な手作業を大幅に節約できます。また、重要なのは、レイアウトを調整するために各ページを変更するのではなく、親フォームのレイアウトを変更するだけで済むため、ページの変更がより実行可能になることです。
注目すべき点の 1 つは、Nestscape ブラウザが Iframe タグをサポートしていないことですが、IE が主流となっている今日の世界では、これは大した問題ではないようです。Iframe タグを広く使用することは、あなた自身 (Web サイト) に利益をもたらすだけでなく、ネットユーザーのインターネット料金を節約することにもなります。なぜそうしないのでしょうか。
例

コードをコピー

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

2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
iframe を使ってみたところ、スクロールバーが美しくないことに気づき、代わりに 2 枚の画像を使いたいと思いました↑↓
これをどのように達成すればよいでしょうか?
答え：
ウェブページ上の次のコードを置き換えます

コードをコピー

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

<タイトル>..</タイトル>
<スクリプト言語="javascript">
関数スクロール(n)
{温度=n;
Out1.scrollTop=Out1.scrollTop+temp;
(temp==0) の場合、戻り値:
setTimeout("スクロール(temp)",80);
}
</スクリプト>
<テーブル幅="330">
<TR>
<TD 幅="304" 有効範囲="上" 行間隔="2" >
<DIV ID=Out1 STYLE="幅:100%; 高さ:100;オーバーフロー: 非表示;ボーダースタイル:破線;ボーダー幅: 1px,1px,1px,1px;">
テキストテキスト

文章

文章

文章

</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>
</表>

Iframe を使用すると、テーブル内で外部ファイルを呼び出すことができるので、非常に便利です。このウェブサイトでは多くのページで iframe 効果を使用しています。
それでは、iframe タグの使い方を学びましょう。
Iframe タグの形式は次のとおりです。

コードをコピー

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

さらにいくつか追加事項があります:
<iframe> はフレームの一種であり、よく使用されます。
例1.
<iframe 幅=420 高さ=330 フレームボーダー=0 スクロール=自動 src=URL></iframe>
これ以上言う言葉はありません。
width: 挿入されたページの幅。height: 挿入されたページの高さ。scrolling: ページスクロールバーを表示するかどうか (オプションのパラメーターは auto、yes、no です。このパラメーターを省略した場合、デフォルトは auto です)。frameborder: 境界線のサイズ。
注意: URL には絶対パスを使用することをお勧めします: <iframe width=0 height=0 frameborder=0 scrolling=auto src=http://WWW.jb51.net></iframe>
黒88*8。。。
例2.
ページにフレームがある場合。。ページ上の任意のリンクをクリックし、この <iframe> で開くように指示します。 iframe に name=** を追加します (** 自分で設定します)
<iframe 名 =** ></iframe>
次に、デフォルトの開くモードを変更します。WebページのHEADに<a href=URL target=**>を追加するか、一部のリンクのターゲットフレームを(**)に設定します。
例3.
ページを挿入します。真ん中の部分だけ取ってもらうように頼みます。他には何も欲しくない。、。。
コード：
<iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="https://www.jb51.net/" frameborder=no scrolling=no width=776 height=2500></iframe>
フレームで覆われた挿入ページの深さを制御します marginwidth=0 marginheight=0; フレームで覆われた上部の深さを制御します vspace=-170
scrolling スクロールバーを使用するかどうか (自動、はい、いいえ) frameborder フレームの境界サイズ、幅 = 776、高さ = 2500、このフレームのサイズ。
1. ページにiframeを追加する
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,
scrolling は、ページのスクロールバーを表示するかどうかを示します。オプションのパラメータは、auto、yes、no です。このパラメータを省略すると、デフォルトは auto になります。
2. ハイパーリンクは埋め込まれた Web ページを指すので、iframe に名前を付けるだけです。メソッドは <iframe name=**> です。たとえば、これを aa と名付け、この HTML 言語を <iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv.com></iframe> と記述すると、Web ページ上のハイパーリンクステートメントは次のように記述されます: <a href=URL target=aa>
3. frameborder を 1 に設定すると、テキストボックスのような効果が得られます。透明な IFRAME の使用は、IE5.5 以上でサポートされている必要があります。transparentBody.htm ファイルの <body> タグに、style="background-color=transparent" を追加しました。次の 4 つの IFRAME の書き方を通じて、iframe の透明な背景効果を実現する方法を明確に理解できると思います。
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME>
ポイント 1: JavaScript を使用して iframe の src を指定し、iframe をリロードします (この記事の下部にある私のプロジェクトを参照してください)
難しさ1: iframeの背景色の設定
.htm ファイル
<スクリプト>
関数setBG(){
var strColor=document.bgColor;
frm.document.bgColor=strColor;
}
</スクリプト>
<body style='background-color:red' onload='setBG()'>
<iframe src='about:blank' name=frm></iframe>
難易度2:
スクリプト言語とオブジェクト階層では、Iframe を含むウィンドウは親ウィンドウと呼ばれ、フローティングフレームは子ウィンドウと呼ばれます。親ウィンドウ内の子ウィンドウにアクセスするには、またはその逆を行うために、プログラムを通じてウィンドウにアクセスして制御するためにオブジェクト階層を理解する必要があるため、2 つの関係を理解することが重要です。
1. 親フォームで子フォームのオブジェクトにアクセスして制御します。親フォームでは、Iframe、つまり子フォームはドキュメントオブジェクトの子オブジェクトです。子フォームのオブジェクトには、スクリプトから直接アクセスできます。
ここで疑問が残ります。この Iframe をどのように制御するかということです。ここでは Iframe オブジェクトについて説明する必要があります。このタグの ID 属性を設定すると、ドキュメントオブジェクトモデル 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>
</本文>
</html>
ID 番号が myH1 である H1 タグ内のテキストを hello, my dear に変更したい場合は、次のようにします。
document.myH1.innerText="hello,my dear" (document は省略可能)
example.htm ファイルでは、Iframe タグオブジェクトが指すサブウィンドウは一般的な DHTML オブジェクトモデルと一致しており、オブジェクトアクセス制御方法も同じであるため、重複しません。
2. 子ウィンドウで親ウィンドウのオブジェクトにアクセスして制御します。子ウィンドウでは、親オブジェクトを介して親ウィンドウのオブジェクトにアクセスできます。
たとえば、example.htm:
<html>
<body onclick="アラート(tt.myH1.innerHTML)">
<iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">こんにちは、妻</h1>
</本文>
</html>
frame1.htm の ID 番号 myH2 のタイトルテキストにアクセスし、それを「hello, my friend」に変更する場合は、次のように記述します。
parent.myH2.innerText="こんにちは、私の友達"
または、parent.document.getElementById("myH2").innerText="hello,my friend"
ここで、親オブジェクトは現在のウィンドウ (example.htm が配置されているウィンドウ) を表します。子ウィンドウから親ウィンドウのオブジェクトにアクセスするには、例外なく親オブジェクトを使用する必要があります。
3: フレームのサブ要素がフレームの別のサブ要素にアクセスします。たとえば、フレームファイル frame.html には、他の 2 つの HTML ファイルが埋め込まれています。
<div styleClass="basewnd">

<div id="検索" name="テスト" align="center" class="top_list_home">
<iframe id="frameSearch" name="search" src="Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="welcome_tag_home">
<iframe src="DirectoryTree.html" frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
ここで、DirectoryTree.html ファイル内の Search.html ファイルで、ID が section である <font></font> タグの innerHTML 属性にアクセスするには、次のようにします。
アラート(親ドキュメント検索セクションインナーHTML)、
ここで、search は「search」div の ID です。または、
アラート(parent.document.getElementById("検索").section.innerHTML)、
または、次のようにすることもできます:
alert(parent.document.frames["frameSublist"].name) (これは iframe への直接アクセスです)
Iframe は別の HTML ファイルに埋め込まれていますが、比較的独立しており、「独立した王国」です。単一の HTML ファイルの機能は、フローティングフレームにも適用されます。
Iframe タグを使用すると、変更されないコンテンツを Iframe で表現できるため、同じコンテンツを書き換える必要がないことを想像してみてください。これはプログラミングのプロセスや関数に少し似ており、面倒な手作業を大幅に節約できます。また、重要なのは、レイアウトを調整するために各ページを変更するのではなく、親フォームのレイアウトを変更するだけで済むため、ページの変更がより実行可能になることです。
Nestscape 6.0 より前のバージョンでは Iframe タグはサポートされていないことに注意してください。
例：
1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<iframe src="page" width="width" height="height" align="配置は左または右、中央に設定できます" scrolling="スクロールバーがあるかどうか、no または yes を入力してください"></iframe>
<IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" width=300></IFRAME>
2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
iframe を使ってみたところ、スクロールバーが美しくないことに気づき、代わりに 2 枚の画像を使いたいと思いました↑↓
これをどのように達成すればよいでしょうか?
答え：
ウェブページの<title>..</title>を次のコードに置き換えます。
<スクリプト言語="javascript">
関数スクロール(n)
{温度=n;
Out1.scrollTop=Out1.scrollTop+temp;
(temp==0) の場合、戻り値:
setTimeout("スクロール(temp)",80);
}
</スクリプト>
<テーブル幅="330">
<TR>
<TD 幅="304" 有効範囲="上" 行間隔="2" >
<DIV ID=Out1 STYLE="幅:100%; 高さ:100;オーバーフロー: 非表示;ボーダースタイル:破線;ボーダー幅: 1px,1px,1px,1px;">
テキスト<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>
</表>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
次のコードは、IFrame の適応型の高さを実現します。つまり、ページの長さに自動的に適応し、ページと IFrame に同時にスクロールバーが表示されないようにします。
ソースコードは以下のとおりです
<script type="text/javascript">
//** iframe は自動的にページに適応します**//
// ページの高さに応じて高さを自動調整する iframe 名のリストを入力します
// 各 iframe の ID を区切るには、カンマを使用します。例: ["myframe1", "myframe2"]。フォームが 1 つしかない場合は、カンマは必要ありません。
//iframeのIDを定義する
var iframeids=["テスト"]
// ユーザーのブラウザが iframe をサポートしていない場合、iframe を非表示にする必要がありますか? yes は非表示を意味し、no は非表示ではないことを意味します
var iframehide="はい"
関数 dyniframesize()
{
var dyniframe = 新しい配列()
(i=0; i<iframeids.length; i++) の場合
{
(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")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="ブロック"
}
}
}
(window.addEventListener) の場合
window.addEventListener("load", dyniframesize, false)
そうでない場合 (window.attachEvent)
window.attachEvent("onload", dyniframesize)
それ以外
window.onload=ダイナミックフレームサイズ
</スクリプト>
HTML <iframe> タグの定義と使用法
iframe 要素は、別のドキュメントを含むインラインフレームを作成します。
HTML と XHTML の違い
なし
オプション属性
DTD この属性が許可される DTD を示します。 S=厳密、T=移行、F=フレームセット。
属性値の説明 DTD
左揃え
右
トップ
真ん中
底
このフレームを周囲のテキストに対してどのように配置するかを指定します。 TF
フレームボーダー1
0
フレームの境界線を表示するかどうかを指定します。 TF
高さピクセル
%
iframe の高さを定義します。 TF
longdesc URL このフレームのコンテンツの長い説明を記述する URL。 TF
marginheight ピクセルは iframe の上部と下部の余白を定義します。 TF
marginwidth ピクセルは iframe の左余白と右余白を定義します。 TF
name frame_name iframe の一意の名前を指定します (スクリプトで使用するため)。 TF
スクロールはい
いいえ
自動車
スクロールバーを定義します。 TF
src URL iframe に表示されるドキュメントの URL。 TF
幅ピクセル
%
iframe の幅を定義します。 TF
以下は、実際のプロジェクトを開発する際に frame を使用して作成したソースコードの一部です (参考用)。
メインファイル（フレームワーク）:
<html>
<ヘッド>
<title>教育局リソース管理システム</title>
<script src="resources/js/DirectoryTree/DirectoryTree.js"></script>
<script src="resources/js/date.js"></script>
<link rel="スタイルシート" type="text/css" href="resources/css/frame.css">
<link rel="スタイルシート" type="text/css" href="resources/css/global.css">
<スクリプト言語="javascript">
関数setBgColor()
{
var bg = document.bgColor
bottom.document.bgColor=背景
}
</スクリプト>
</head>
<body bgcolor="#f9edff" onload="setBgColor()">
<div styleClass="basewnd">

<div align="center" class="flag">
<iframe src="resources/HTMLFolders/Logo.html" frameBorder="0" scrolling="no" width="950px" height="115px" marginheight="0"></iframe>
</div>

<div align="center" class="ユーザー">
<iframe src="resources/HTMLFolders/UserLogin.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>

<div id="検索" name="テスト" align="center" class="top_list_home">
<iframe id="frameSearch" name="search" src="resources/HTMLFolders/Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="navigation">
<iframe src="resources/HTMLFolders/Navigation.html" frameBorder="0" scrolling="no" width="950px" height="25px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="newest_topic">
<iframe src="resources/HTMLFolders/Sublist.html" frameBorder="0" scrolling="no" width="540px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="welcome_tag_home">
<iframe src="resources/HTMLFolders/DirectoryTree.html" frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="rights_home">
<iframe id="bottom" name="bottom" src="resources/HTMLFolders/Bottom.html" frameBorder="0" scrolling="no" width="950px" height="100px" marginheight="0" marginwidth="0" allowTransparency="true" style="background-color: red"></iframe>
</div>
</div>
</本文>
</html>
参照ファイル UserLogin.html:
<link rel="スタイルシート" type="text/css" href="../css/global.css">
<表の境界線="0" 配置="左" 幅="193" セルパディング="1" セル間隔="0" スタイル="border-style:solid;border-width:1px;border-color:#eeeeee;">
<tr><td>
<表の境界線="0" 配置="左" 幅="190" セルパディング="0" セル間隔="0">
<tr>
<td align="left" valign="middle" width="20" height="25" class="tdfnt12px" background="../images/title_bar2.png" >
</td>
<td align="left" valign="bottom" height="25" class="tdfnt12px" background="../images/title_bar2.png">
<font style="height:18px;font-family:宋体;font-size:14px;"> <b>メンバーログイン</b></font>
</td>
</tr>
</テーブル>
</td></tr>
</テーブル>
<div id="divLogin" style="visibility:visible;position:absolute;left:10px;top:30px">
<表の境界線="0" 配置="左" 幅="193" セルパディング="1" セル間隔="0" スタイル="境界線スタイル:ソリッド;境界線幅:0px;境界線色:#eeeeee;">
<tr>
<td align="left" valign="bottom" height="45"><font class="normal">ユーザー名:</font>
<td valign="bottom"><input type="text" name="userAreaUserName" id="userAreaUserName" class="id" maxlength="16"/></td>
</tr>
<tr>
<td align="left" height="40"><font class="normal">パスワード:</font>
<td><input type="password" name="userAreaUserPwd" id="userAreaUserPwd" class="pwd" maxlength="16"/></td>
</tr>
<tr>
<td align="center" colspan="2" class="tdfnt12px">
<input type="submit" value="ログイン" style="color:black;border-color:skyblue;border-style:solid;border-width:0px;vertical-align:middle;font-family:宋体;width:68px;height:24px;background:url(resources/images/ButtonBg02.png);"/>
</td>
</tr>
</テーブル>
</div>
ここで、「最新テーマリスト」ファイルにハイパーリンクがあるとします。これをクリックすると、「最新テーマリスト」を含む iframe が再読み込みされます。この時点で、これを実装するには JavaScript を使用する必要があります。
<a href="" onclick="redirect(); return false">www.baidu.com</a>
<スクリプト言語="javascript">
関数リダイレクト()
{
parent.document.frames["frameSublist"].location.href="www.baidu.com"
}
</スクリプト>

<<: Ace をベースにした Markdown エディターを共有する

>>: 数千万件のレコードをMySQLに素早く挿入する方法に関する実践的なチュートリアル