フレームワーク間の参照
ページ内のすべてのフレームは、コレクションの形式でウィンドウ オブジェクトの属性として提供されます。例: window.frames は、ページ内のすべてのフレームのコレクションを表します。これは、フォーム オブジェクト、リンク オブジェクト、ピクチャ オブジェクトなどと似ています。 . ですが、違いは、これらのコレクションはドキュメントのプロパティであることです。したがって、サブフレームを参照するには、次の構文を使用できます。
次のようにコードをコピーします。
window.frames["フレーム名"];
window.frames.frameName
window.frames[インデックス]
このうち、window という単語も self に置き換えたり省略したりできます。frameName がページ内の最初のフレームであると仮定すると、次の記述方法は同等です。
次のようにコードをコピーします。
self.frames["フレーム名"]
self.frames[0]
フレーム[0]
フレーム名
各フレームは HTML ページに対応するため、このフレームは独立したブラウザ ウィンドウでもあり、フレームへのいわゆる参照はウィンドウ オブジェクトへの参照になります。この window オブジェクトを使用すると、window.document オブジェクトを使用してページにデータを書き込んだり、window.location プロパティを使用してフレーム内のページを変更したりするなど、その中のページを簡単に操作できます。
以下では、異なるレベルのフレームワーク間の相互参照を紹介します。
1.親フレームから子フレームへの参照
上記の原則を知っていると、親フレームから子フレームを参照するのは非常に簡単です。つまり、次のようになります。
次のようにコードをコピーします。
window.frames["フレーム名"];
これは、ページ内のframeNameという名前のサブフレームを参照します。参照されるフレーム (実際にはウィンドウ オブジェクト) の性質に従って、サブフレーム内のサブフレームを参照したい場合は、次のように実装できます。
次のようにコードをコピーします。
window.frames["フレーム名"].frames["フレーム名2"];
このようにして、第 2 レベルのサブフレームが参照され、同様に、多層フレームワークの参照を実現できます。
2.子フレームから親フレームへの参照
各ウィンドウ オブジェクトには、その親フレームを表すparentプロパティがあります。フレームがすでにトップレベルのフレームである場合、window.parent はフレーム自体も表します。
3．兄弟フレーム間の参照
2 つのフレームが同じフレームのサブフレームである場合、それらは兄弟フレームと呼ばれ、親フレームを通じて相互に参照できます。たとえば、ページには 2 つのサブフレームが含まれます。
次のようにコードをコピーします。
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</フレームセット>
Frame1 では、次のステートメントを使用して Frame2 を参照できます。
次のようにコードをコピーします。
self.parent.frames["frame2"];
4.異なるレベルのフレームワーク間の相互参照
フレームワークのレベルは、トップレベルのフレームワーク用です。レベルが異なる場合、自分がいるレベルと、他のフレームのレベルと名前がわかっていれば、フレームによって参照されるウィンドウ オブジェクトのプロパティを使用して、相互に簡単にアクセスできます。次に例を示します。
次のようにコードをコピーします。
self.parent.frames["childName"].frames["targetFrameName"];
5.最上位フレームへの参照
親プロパティと同様に、ウィンドウ オブジェクトにもトップ プロパティがあります。これは、トップレベルのフレームへの参照を表し、フレーム自体がトップレベルのフレームであるかどうかを判断するために使用できます。次に例を示します。
次のようにコードをコピーします。
//このフレームがトップレベルのフレームかどうかを判断します
if(self==top){
//何かをする
}
フレームの読み込みページを変更する
フレームへの参照は、ウィンドウ オブジェクトへの参照です。ウィンドウ オブジェクトの location 属性を使用すると、次のようにフレームのナビゲーションを変更できます。
window.frames[0].location="1.html";
これにより、ページ内の最初のフレームのページが 1.html にリダイレクトされます。このプロパティを利用して、1 つのリンクを使用して複数のフレームを更新することもできます。
次のようにコードをコピーします。
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</フレームセット>
<!--何らかのコード-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">リンク</a>
<!--何らかのコード-->
他のフレームワーク内の JavaScript 変数と関数を参照する
他のフレームワークで JavaScript の変数と関数を参照する手法を紹介する前に、次のコードを見てみましょう。
次のようにコードをコピーします。
<script language="JavaScript" type="text/javascript">
<!--
関数 hello(){
alert("こんにちは、ajax!");
}
window.hello();
//-->
</script>
このコードを実行すると、hello() 関数の実行結果である「hello, ajax!」ウィンドウが表示されます。では、なぜ hello() が window オブジェクトのメソッドになったのでしょうか?ページ内で定義されたすべてのグローバル変数とグローバル関数はウィンドウ オブジェクトのメンバーであるためです。例えば：
次のようにコードをコピーします。
変数a=1;
アラート(window.a);
ダイアログ ボックスが表示され、1 が表示されます。同じ原則が、ウィンドウ オブジェクトを通じて変数や関数を呼び出すことで、異なるフレームワーク間で変数や関数を共有する場合にも当てはまります。
たとえば、製品閲覧ページは 2 つのサブフレームで構成されており、左側は製品カテゴリへのリンクを表し、ユーザーがカテゴリ リンクをクリックすると、対応する製品リストが右側に表示されます。製品の横にある [購入] リンクをクリックして、製品のショッピング カートを追加します。
この例では、左側のナビゲーション ページを使用して、ユーザーが購入したい製品を保存できます。これは、ユーザーがナビゲーション リンクをクリックすると、別のページ、つまり製品表示ページとナビゲーション ページ自体が変化するためです。変更されないため、JavaScript 変数は失われず、グローバル データの保存に使用できます。その実装原理は次のとおりです。
左側のページが link.html、右側のページが show.html であるとします。ページ構造は次のとおりです。
次のようにコードをコピーします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<頭>
<title> 新しいドキュメント </title>
</head>
<frameset Cols="20%,80%">
<frame src="link.html" name="link" />
<frame src="show.html" name="show" />
</フレームセット>
</html>
show.html に表示される製品の横に次のようなステートメントを追加できます。
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">カートに追加</a>
このうち、link はナビゲーション フレームワークを表し、arrOrders 配列は商品の ID を格納するために定義されており、関数 addToOrders() は、[購入] リンクのクリック イベントに応答するために使用されます。受け取ったパラメータ ID は製品の ID を表します。例は ID 32068 です。
次のようにコードをコピーします。
<script language="JavaScript" type="text/javascript">
<!--
var arrOrders=新しい配列();
関数 addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
このようにして、チェックアウト ページまたはショッピング カートの閲覧ページで arrOrders を使用して、購入可能なすべての製品を取得できます。
フレームワークは、ページを独立した機能を持つ複数のモジュールに分割することができ、各モジュールは互いに独立していますが、ウィンドウ オブジェクトの参照を通じて接続することができます。これは Web 開発において重要なメカニズムです。