iframe 要素の機能は、ドキュメント内にドキュメントを埋め込み、フローティング フレームを作成することです。 iframe がどのように制御されるのかをよく理解していない人も多く、基本的にはまだ漠然と理解している状態です。
iframe に関する 2 つの注意点。ifr は既存の iframe の ID と NAME の値です。
以下は引用符で囲まれた部分です。
document.getElementById(“ifr”);
window.frames[“ifr”];
iframe で関数を使用する場合、変数は完全な DOM モデルを使用するため、2 番目のメソッドを実行する必要があります (これが正しいかどうかはわかりません)
。 iframe の src または border、scrolling およびその他の属性 (これらはプロパティとは異なる概念であり、プロパティは、scrollHeight、innerHTML などのタグ内に記述することはできません) を変更するには、最初のメソッドを使用する必要があります。
iframe のページ (iframe 自体ではなく) を取得したい場合は、完全な DOM モデルを取得するため、2 番目のメソッドを使用する必要があります。たとえば、ドキュメントの document.body のコンテンツを取得したい場合です。 iframe の場合は、2 番目の方法のみを使用できます。
また、iframe ページが完全にロードされていない場合、iframe の DOM モデルを呼び出すときに重大なエラーが発生することに注意してください。そのため、次の例は
フォールト トレラント モードを準備する必要があります。
、1 つは aa.htm、もう 1 つは bb.htm!
aa .htm
コード: 以下は引用部分です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<頭>
<title>無題のページ</title>
<style type="text/css">
<!--
体{
マージン:0px;
}
-->
</スタイル>
</head>
<本文>
<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe>
</body>
</html>
<script language="javascript" type="text/javascript">
var aa_value="私はトップ ウィンドウの亜種です!";
var ifr_id=document.getElementById("ifr");
var ifr_window=window.frames["ifr"];
alert("トップ ウィンドウからのアラート : ifr_id で iframe のバリアントを取得できません。次のエラーが返されます:" + ifr_id.bb_var);
alert("トップウィンドウからのアラート: ifr_id で iframe の DOM モデルを取得できません。次のエラーが返されます:" + ifr_id.window);
alert("トップウィンドウからのアラート : ID から src を取得:" + ifr_id.src);
alert("上部ウィンドウからのアラート : ウィンドウから href を取得:" + ifr_window.document.location.href);
//bb.htmがまだ読み込まれていない可能性があるため、ダウンロードするとエラーになる可能性があります。
// iframe で関数 ifr_window.bb() を呼び出します。
//iframe内で変数を呼び出す
alert("トップウィンドウからのアラート: " + ifr_window.bb_var);
//
alert("トップウィンドウからのアラート:" + ifr_window.document.body.innerHTML);
関数 aa(msg){
alert("トップ ウィンドウから警告していますが、メッセージを受け取りました:n" + msg);
}
</script>
bb.htm
コード: 以下は引用されたスニペットです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<頭>
<title>サブフレーム</title>
<style type="text/css">
<!--
html,ボディ{
マージン:0px;
幅:90%;
}
-->
</スタイル>
</head>
<本文>
私はサブフレームです！
<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...
</body>
</html>
<script language="javascript" type="text/javascript">
var bb_var="私は ifr の変数です";
functionbb(){
alert("iframe からのアラート:IFR のフレーム関数です")
}
//親ページの変数を取得する
alert("iframe からのアラートparent.ifr_id::" +parent.ifr_id);
alert("iframe からのアラートparent.aa_value : " +parent.aa_value);
// 親ページの ifr_id を使用して iframe の高さを変更します
alert("iframe からのアラート: ifr の clientHeight :" +document.body.clientHeight);
親.ifr_id.height=document.body.clientHeight;
alert("iframeからのアラート: ifrのscrollHeight: " + document.body.scrollHeight);
// 親フォームの関数を呼び出します。
parent.aa("トップウィンドウの関数を呼び出します ");
// 親フォームのタイトルを変更します。
alert("iframeからの警告:トップウィンドウのタイトルを変更します");
top.document.title="タイトルの値が変更されました";
// 親フォームの ifr_id によって境界線とスクロールが変更されました
alert("iframe からの警告 : 境界線とスクロールを変更します :");
トップ.ifr_id.border=0;
top.ifr_id.scrolling="いいえ";
</script>