フレーム内のjs関数の相互呼び出しを詳しく解説_基礎知識-jsチュートリアル-php.cn

フレーム内のjs関数の相互呼び出しを詳しく解説_基礎知識

WBOY

リリース： 2016-05-16 16:57:26

オリジナル

1169 人が閲覧しました

フレーム間の相互参照

ページ内のすべてのフレームは、ウィンドウオブジェクトの属性としてコレクションの形式で提供されます。たとえば、window.frames はページ内のすべてのフレームのコレクションを表します。 form オブジェクト、link オブジェクト、picture オブジェクトなどと同じですが、違いは、これらのコレクションがドキュメントの属性であることです。したがって、サブフレームを参照するには、次の構文を使用できます:

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

window.frames["frameName"]; 
 window.frames.frameName
window.frames[index]

このうち、window という単語も self に置き換えたり省略したりすることができます。frameName がページ内の最初のフレームであるとすると、以下の記述方法は同等です。

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

self.frames["frameName"]
self .frames[0]
frames[0]
frameName

各フレームは HTML ページに対応するため、このフレームは独立したブラウザウィンドウでもあり、フレームへのいわゆる参照はウィンドウオブジェクトへの参照でもあります。この window オブジェクトを使用すると、window.document オブジェクトを使用してページにデータを書き込んだり、window.location プロパティを使用してフレーム内のページを変更したりするなど、その中のページを簡単に操作できます。

以下では、異なるレベルのフレームワーク間の相互参照を紹介します。

1．親フレームから子フレームへの参照

上記の原則を知っていると、親フレームから子フレームを参照することは非常に簡単です。つまり、

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

window.frames["frameName"];

これは、ページ内のframeNameという名前のサブフレームを参照します。サブフレーム内のサブフレームを参照したい場合は、参照されるフレーム (実際にはウィンドウオブジェクト) の性質に従って、次のように実装できます。

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

window.frames["frameName"].frames["frameName2"];

このようにして、第 2 レベルのサブフレームが参照されるなど、多層フレームワークの参照が実現されます。
2．子フレームから親フレームへの参照

各ウィンドウオブジェクトには、親フレームを表すparent属性があります。フレームがすでにトップレベルのフレームである場合、window.parent はフレーム自体も表します。

3．兄弟フレーム間の参照

2 つのフレームが同じフレームのサブフレームである場合、それらは兄弟フレームと呼ばれ、親フレームを通じて相互に参照できます。たとえば、ページには 2 つのサブフレームが含まれます:

コードをコピーしますコードは次のとおりです。

< フレーム src="1.html" name="frame1" />

フレーム 1 で次のステートメントを使用してフレーム 2 を参照できます:

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

self.parent.frames["frame2"];

4．異なるレベルのフレームワーク間の相互参照

フレームワークのレベルは、最上位のフレームワーク用です。レベルが異なる場合、現在のレベルと他のフレームのレベルと名前がわかっていれば、フレームによって参照されるウィンドウオブジェクトのプロパティを使用して相互に簡単にアクセスできます。たとえば、

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

self.parent.frames["childName"]。フレーム["ターゲットフレーム名"];

5．最上位フレーム

への参照は、parent 属性と似ています。window オブジェクトにも top 属性があります。これはトップレベルのフレームへの参照を表し、フレーム自体がトップレベルのフレームであるかどうかを判断するために使用できます。たとえば、

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

//このフレームがトップであるかどうかを判断します-level Frame

if(self==top){
//dosomething
}

フレームの読み込みページを変更します
フレームへの参照は、ウィンドウオブジェクトの location 属性を使用して、フレームのナビゲーションを変更できます。たとえば、
。 window.frames[0].location= "1.html";
これにより、ページ内の最初のフレームのページが 1.html にリダイレクトされます。このプロパティを使用すると、1 つのリンクを使用して複数のフレームを更新することもできます。

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

リンク< ;/a>

他のフレームワークでの JavaScript 変数と関数の参照
他のフレームワークで JavaScript 変数と関数を参照する手法を紹介する前に、次のコードを見てみましょう:

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

このコードを実行すると、hello() 関数の実行結果である「hello, ajax!」ウィンドウが表示されます。では、なぜ hello() が window オブジェクトのメソッドになったのでしょうか?ページ内で定義されたすべてのグローバル変数とグローバル関数はウィンドウオブジェクトのメンバーであるためです。例:

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

var a=1;
alert( window.a);

を実行すると、1 を示すダイアログボックスが表示されます。同じ原則が、ウィンドウオブジェクトを通じて変数や関数を呼び出すことで、異なるフレームワーク間で変数や関数を共有する場合にも当てはまります。
例: 製品閲覧ページは 2 つのサブフレームで構成され、ユーザーがカテゴリのリンクをクリックすると、対応する製品リストが右側に表示されます。商品の横にある[購入]リンクをクリックして商品をカートに追加します。
この例では、左側のナビゲーションページを使用して、ユーザーが購入したい製品を保存できます。これは、ユーザーがナビゲーションリンクをクリックすると、別のページである製品表示ページが変化し、ナビゲーションページ自体が変化するためです。は変更されないため、その中の JavaScript 変数は失われることなく、グローバルデータの保存に使用できます。実装原理は次のとおりです。
左側のページが link.html で、右側のページが show.html であるとします。ページ構造は次のとおりです。

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

新しいドキュメント

show.html に表示される商品の横に次のようなステートメントを追加できます。
ショッピングチェに追加
ここで、リンクはナビゲーションフレームを表します。arrOrders 配列は、商品の ID を格納するために定義されています。関数 addToOrders() は、クリックイベントに応答するために使用されます。製品の横にある [購入] リンクの受け取ったパラメータ ID は、製品の ID を表します。この例では、ID 32068 の製品です。

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

このように、arrOrders を使用して、チェックアウトページまたはショッピングカートで購入できるすべての商品を取得できます。閲覧ページ。
フレームワークは、ページを独立した機能を持つ複数のモジュールに分割することができ、各モジュールは互いに独立していますが、ウィンドウオブジェクトの参照を通じて接続することができます。これは Web 開発において重要なメカニズムです。