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

フレーム間の相互参照

ページ内のすべてのフレームは、ウィンドウ オブジェクトの属性としてコレクションの形式で提供されます。たとえば、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() が wi​​ndow オブジェクトのメソッドになったのでしょうか?ページ内で定義されたすべてのグローバル変数とグローバル関数はウィンドウ オブジェクトのメンバーであるためです。例:

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

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

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

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

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

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。