JavaScript フレームワーク (iframe) 操作の概要_JavaScript スキル
May 16, 2016 pm 04:52 PMフレームワークプログラミングの概要
HTML ページには、
フレーム間の参照
ページ内のすべてのフレームは、コレクションの形式でウィンドウ オブジェクトの属性として提供されます。例: window.frames は、フォーム オブジェクト、リンク オブジェクト、ピクチャと同様に、ページ内のすべてのフレームのコレクションを表します。違いは、これらのコレクションがドキュメントのプロパティであることです。したがって、サブフレームを参照するには、次の構文を使用できます:
window.frames.frameName
window.frames[index]
このうち、window という単語は self に置き換えたり省略したりすることもできます。 FrameName がページ Frame の最初のものであると仮定すると、次の記述メソッドは同等です:
self.frames[0]
frames[0]
frameName
各フレームは HTML ページに対応するため、これはフレームは独立したブラウザ ウィンドウでもあり、ウィンドウのすべてのプロパティを持ちます。フレームへのいわゆる参照は、ウィンドウ オブジェクトへの参照でもあります。この window オブジェクトを使用すると、window.document オブジェクトを使用してページにデータを書き込んだり、window.location プロパティを使用してフレーム内のページを変更したりするなど、その中のページを簡単に操作できます。
以下では、異なるレベルのフレームワーク間の相互参照を紹介します。
1．親フレームから子フレームへの参照
上記の原則を知っていると、親フレームから子フレームを参照するのは非常に簡単です。つまり、
これは、ページ内のframeNameという名前のサブフレームを参照します。サブフレーム内のサブフレームを参照したい場合は、参照されるフレーム (実際にはウィンドウ オブジェクト) の性質に従って、次のように実装できます。
このように、2 番目の-level サブフレームを参照するなど、引用により多層フレームワークを実装できます。
2．子フレームから親フレームへの参照
各ウィンドウ オブジェクトには、その親フレームを表すparent属性があります。フレームがすでにトップレベルのフレームである場合、window.parent はフレーム自体も表します。
3．兄弟フレームワーク間の参照
2 つのフレームが同じフレームのサブフレームである場合、それらは兄弟フレームと呼ばれ、親フレームを通じて相互に参照できます。たとえば、ページには 2 つのサブフレームが含まれます:
<frame src ="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
あなたFrame1 で次のステートメントを使用できます Frame2 を参照するには:
4.異なるレベルのフレームワーク間の相互参照
フレームの階層はトップレベルのフレームのものです。レベルが異なる場合、現在のレベルと他のフレームのレベルと名前がわかっていれば、フレームによって参照されるウィンドウ オブジェクトのプロパティを使用して相互に簡単にアクセスできます。たとえば、
5．最上位フレームへの参照
parent 属性と同様に、window オブジェクトにも top 属性があります。これは、トップレベルのフレームへの参照を表し、フレーム自体がトップレベルのフレームであるかどうかを判断するために使用できます。例:
if(self==top){
//dosomething
}
フレームの読み込みページを変更します
フレームへの参照は、ウィンドウ オブジェクトへの参照です。たとえば、
<フレーム src="2.html" name="frame2" />
</フレームセット>< ;!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a> ;
<!--somecode-->
他のフレームワークでの JavaScript 変数と関数の参照
他のフレームワークで JavaScript 変数と関数を参照する手法を紹介する前に、次のコードを見てみましょう:
}
window.hello();
var a=1;
alert(window.a);[/code]
と入力すると、1 を示すダイアログ ボックスが表示されます。同じ原則が、ウィンドウ オブジェクトを通じて変数や関数を呼び出すことで、異なるフレームワーク間で変数や関数を共有する場合にも当てはまります。
例: 製品閲覧ページは 2 つのサブフレームで構成され、ユーザーがカテゴリのリンクをクリックすると、対応する製品リストが右側に表示されます。商品の横にある[購入]リンクをクリックして商品をカートに追加します。
この例では、左側のナビゲーション ページを使用して、ユーザーが購入したい製品を保存できます。これは、ユーザーがナビゲーション リンクをクリックすると、別のページである製品表示ページが変化し、ナビゲーション ページ自体が変化するためです。は変更されないため、その中の JavaScript 変数は失われることなく、グローバル データの保存に使用できます。実装原理は次のとおりです。
左側のページが link.html、右側のページが show.html であるとします。ページ構造は次のとおりです。
<html>
<head>
<title> 新しいドキュメント </title>
</head>
<framesetcols="20%,80%" >
<frame src ="link.html" name="link" />
<frame src="show.html" name="show" />
</フレームセット>
</html> ;
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">ショッピング チェに追加</a>
ここで、リンクはナビゲーション フレームを表します。arrOrders 配列は、商品の ID を格納するために定義されています。関数 addToOrders() は、クリック イベントに応答するために使用されます。受け取ったパラメータ ID は、製品の ID を表します。この例では、
}
このようにして、arrOrders を使用して、チェックアウト ページまたはショッピング カートの閲覧ページで購入できるすべての製品を取得できます。
フレームワークは、ページを独立した機能を持つ複数のモジュールに分割することができ、各モジュールは互いに独立していますが、ウィンドウオブジェクトの参照を通じて接続することができます。これは Web 開発において重要なメカニズムです。 Ajax 開発では、隠しフレームを使用してさまざまなテクニックを実装することもできます。後で Ajax プログラミングの例を紹介するときに、このテクノロジーが更新せずにファイルをアップロードし、Ajax の前方および後方の問題を解決するために使用されることがわかります。
人気の記事
人気の記事
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7299
9
1622
14
1342
46
1259
25
1206
29
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
