JavaScript フレームワーク (iframe) 操作の概要_JavaScript スキル

フレームワークプログラミングの概要

HTML ページには、

フレーム間の参照

ページ内のすべてのフレームは、コレクションの形式でウィンドウ オブジェクトの属性として提供されます。例: window.frames は、フォーム オブジェクト、リンク オブジェクト、ピクチャと同様に、ページ内のすべてのフレームのコレクションを表します。違いは、これらのコレクションがドキュメントのプロパティであることです。したがって、サブフレームを参照するには、次の構文を使用できます:

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

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

このうち、window という単語は self に置き換えたり省略したりすることもできます。 FrameName がページ Frame の最初のものであると仮定すると、次の記述メソッドは同等です:

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

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 番目の-level サブフレームを参照するなど、引用により多層フレームワークを実装できます。

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

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

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

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

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

あなたFrame1 で次のステートメントを使用できます Frame2 を参照するには:

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

self .parent.frames["frame2"];

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

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

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

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

5．最上位フレームへの参照

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

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

//このフレームがトップレベルのフレームかどうかを判断します
if(self==top){
//dosomething
}

フレームの読み込みページを変更します

フレームへの参照は、ウィンドウ オブジェクトへの参照です。たとえば、

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

window.frames[0].location="1.html";

これにより、ページの最初のフレームを 1 .html に変更すると、このプロパティを利用して、単一のリンクを使用して複数のフレームを更新することもできます。

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

フレームセット>< ;!--somecode-->
link> ;

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

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

function hello(){

alert("hello,ajax!" );
}
window.hello();

このコードを実行すると、hello() 関数の実行結果である「hello, ajax!」ウィンドウが表示されます。 。では、なぜ hello() が wi​​ndow オブジェクトのメソッドになったのでしょうか?ページ内で定義されたすべてのグローバル変数とグローバル関数はウィンドウ オブジェクトのメンバーであるためです。例:
var a=1;
alert(window.a);[/code]
と入力すると、1 を示すダイアログ ボックスが表示されます。同じ原則が、ウィンドウ オブジェクトを通じて変数や関数を呼び出すことで、異なるフレームワーク間で変数や関数を共有する場合にも当てはまります。
例: 製品閲覧ページは 2 つのサブフレームで構成され、ユーザーがカテゴリのリンクをクリックすると、対応する製品リストが右側に表示されます。商品の横にある[購入]リンクをクリックして商品をカートに追加します。
この例では、左側のナビゲーション ページを使用して、ユーザーが購入したい製品を保存できます。これは、ユーザーがナビゲーション リンクをクリックすると、別のページである製品表示ページが変化し、ナビゲーション ページ自体が変化するためです。は変更されないため、その中の JavaScript 変数は失われることなく、グローバル データの保存に使用できます。実装原理は次のとおりです。
左側のページが link.html、右側のページが show.html であるとします。ページ構造は次のとおりです。

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

フレームセット>
> ;

show.html に表示される商品の横に次のようなステートメントを追加できます。

ショッピング チェに追加
ここで、リンクはナビゲーション フレームを表します。arrOrders 配列は、商品の ID を格納するために定義されています。関数 addToOrders() は、クリック イベントに応答するために使用されます。受け取ったパラメータ ID は、製品の ID を表します。この例では、

コードをコピーします コードは次のとおりです: var arrOrders=new Array();

function addToOrders(id){

arrOrders.push( id);
}

このようにして、arrOrders を使用して、チェックアウト ページまたはショッピング カートの閲覧ページで購入できるすべての製品を取得できます。
フレームワークは、ページを独立した機能を持つ複数のモジュールに分割することができ、各モジュールは互いに独立していますが、ウィンドウオブジェクトの参照を通じて接続することができます。これは Web 開発において重要なメカニズムです。 Ajax 開発では、隠しフレームを使用してさまざまなテクニックを実装することもできます。後で Ajax プログラミングの例を紹介するときに、このテクノロジーが更新せずにファイルをアップロードし、Ajax の前方および後方の問題を解決するために使用されることがわかります。