フレーム プログラミングの概要 HTML ページには、 でマークされ、独立した HTML ページを表示するために使用される 1 つ以上のサブフレームを含めることができます。ここで説明するフレームワークプログラミングには、あるフレームワークから別のフレームワークのJavaScript変数を参照したり、他のフレームワークの関数を呼び出したり、別のフレームワークのフォームの動作を制御したりするなど、フレームワークの自己制御やフレームワーク間の相互アクセスが含まれます。 <br><br><strong>フレーム間の相互参照</strong> <br>ページ内のすべてのフレームは、コレクションの形式でウィンドウ オブジェクトの属性として提供されます。たとえば、window.frames はすべてのフレームの属性を表します。ページ内のフレームは、フォーム オブジェクト、リンク オブジェクト、ピクチャ オブジェクトなどに似ています。違いは、これらのコレクションがドキュメントの属性であることです。したがって、サブフレームを参照するには、次の構文を使用できます: <br>window.frames["frameName"]; <br>window.frames.frameName <br>window.frames[index] <br>ここで、window という単語は代わりに self を使用することも、省略することもできます。frameName がページの最初のフレームであると仮定すると、次の記述メソッドは同等です: <br>self.frames["frameName"] <br>self.frames[0] <br>frames [0] <br>frameName <br>各フレームは HTML ページに対応するため、このフレームは独立したブラウザ ウィンドウでもあり、いわゆるフレームへの参照も備えています。ウィンドウオブジェクトへの参照。この window オブジェクトを使用すると、window.document オブジェクトを使用してページにデータを書き込んだり、window.location プロパティを使用してフレーム内のページを変更したりするなど、その中のページを簡単に操作できます。 <br><br><strong>以下では、異なるレベルのフレームワーク間の相互参照を紹介します。 </strong> <br><br>1.親フレームから子フレームへの参照 <br> 上記の原則を知っていると、親フレームから子フレームを参照するのは非常に簡単です。<br>window.frames["frameName"]; <br>このように、ページ内の名前が参照されるのは、frameName のサブフレームです。サブフレーム内のサブフレームを参照したい場合は、ウィンドウ オブジェクトの性質に従って、参照されるフレームを次のように実装できます。 <br>window.frames["frameName"].frames["frameName2"]; >参照方法は次のとおりです。 第 2 レベルのサブフレームワークなどになると、多層フレームワークの参照が実現されます。 <br><br>2．子フレームから親フレームへの参照 <br>各ウィンドウオブジェクトには、親フレームを表すparent属性があります。フレームがすでにトップレベルのフレームである場合、window.parent はフレーム自体も表します。 <br><br>3．兄弟フレーム間の参照 <br> 2 つのフレームが同じフレームのサブフレームである場合、それらは親フレームを通じて相互に参照できます。たとえば、ページには 2 つのサブフレームが含まれます。 🎜><br><br><div class="codetitle">コードをコピーします<span><a style="CURSOR: pointer" data="81594" class="copybut" id="copybut81594" onclick="doCopy('code81594')"><u> コードは次のとおりです:</u></a> </span><frameset rows="50%,50%"> ; </div><フレーム src="1.html"name="frame1" /><div class="codebody" id="code81594"><frame src="2.html"/> ; <br><br> <br>frame1 で次のステートメントを使用して、frame2 を参照できます: <br>self.parent.frames["frame2"];異なるレベルのフレームワーク間の相互参照 <br>フレームワークのレベルは、最上位のフレームワーク用です。レベルが異なる場合、自分がいるレベルと、他のフレームのレベルと名前がわかっていれば、フレームによって参照されるウィンドウ オブジェクトのプロパティを使用して、相互に簡単にアクセスできます。たとえば、</div>self.parent.frames["childName "].frames["targetFrameName"]; <br><br>5．最上位フレーム <br> への参照は、parent 属性と似ています。window オブジェクトにも top 属性があります。これは、トップレベルのフレームへの参照を表し、フレーム自体がトップレベルのフレームであるかどうかを判断するために使用できます。例: <br><br><br><br><br>Copy code<br><br><div class="codetitle"> コードは次のとおりです: <span><a style="CURSOR: pointer" data="73308" class="copybut" id="copybut73308" onclick="doCopy('code73308')"> <u>//このフレームがトップレベルのフレームかどうかを判断します</u>if(self==top){ </a>//dosomething </span>} </div> <div class="codebody" id="code73308"> <br> <br>フレームの読み込みページを変更します<br> <br>フレームへの参照は、ウィンドウ オブジェクトの location 属性を使用して、ウィンドウ オブジェクトへの参照になります。フレームのナビゲーションを変更できます。例: <br>window.frames[0] .location="1.html"; </div>これにより、ページ内の最初のフレームのページが 1.html にリダイレクトされます。このプロパティを使用すると、1 つのリンクを使用して複数のフレームを更新することもできます。 <br><strong></strong><br><br>コードをコピー<br><br><div class="codetitle"> コードは次のとおりです:<span><a style="CURSOR: pointer" data="51282" class="copybut" id="copybut51282" onclick="doCopy('code51282')"> <u><frameset rows="50%, 50%" > </u><frame src="1.html"name="frame1" /> </a><frame src="2.html"name="frame2" /> </span> </ フレームセット> </div><!--somecode--> <div class="codebody" id="code51282"><a href="frame1.location='3.html;frame2.location='4.html'" >リンク< ;/a> <br><!--somecode--><br>他のフレームワークでの JavaScript 変数と関数の参照<br>他のフレームワークで JavaScript 変数と関数を参照するテクニックを紹介する前に、次のコードを見てみましょう: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="90803" class="copybut" id="copybut90803" onclick="doCopy('code90803')"><u> コードをコピーします </u></a></span> コードは次のとおりです: </div> <div class="codebody" id="code90803"> <br><script language="JavaScript" type="text/javascript"> ;!-- <br>function hello(){ <br>alert("hello,ajax!") <br>} <br>//--> </script> <br><br> <br>このコードを実行すると、hello() 関数の実行結果である「hello, ajax!」ウィンドウが表示されます。では、なぜ hello() が window オブジェクトのメソッドになったのでしょうか?ページ内で定義されたすべてのグローバル変数とグローバル関数はウィンドウ オブジェクトのメンバーであるためです。例: <br>var a=1; </div>alert(window.a); <br> と表示されたダイアログ ボックスが表示されます。同じ原則が、ウィンドウ オブジェクトを通じて変数や関数を呼び出すことで、異なるフレームワーク間で変数や関数を共有する場合にも当てはまります。 <br>例: 製品閲覧ページは 2 つのサブフレームで構成され、ユーザーがカテゴリのリンクをクリックすると、対応する製品リストが右側に表示されます。商品の横にある[購入]リンクをクリックして商品をカートに追加します。 <br>この例では、左側のナビゲーション ページを使用して、ユーザーが購入したい製品を保存できます。これは、ユーザーがナビゲーション リンクをクリックすると、別のページである製品表示ページが変化し、ナビゲーション ページ自体が変化するためです。は変更されないため、その中の JavaScript 変数は失われることなく、グローバル データの保存に使用できます。実装原理は次のとおりです。 <br><br> 左側のページが link.html で、右側のページが show.html であるとします。 ページ構造は次のとおりです。 <br><br><br><br> <div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="72240" class="copybut" id="copybut72240" onclick="doCopy('code72240')"><u> コードは次のとおりです: </u></a> </span><!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"> ; </div><html> <div class="codebody" id="code72240"><title> <br></head> %"> <br>< フレーム src="link.html"name="link" /> <br><フレーム src="show.html"name="show" /> <br>< ;/frameset> <br>< /html> <br><br> <br>show.html に表示される商品の横に次のようなステートメントを追加できます: <br><a href="void(0) )"onclick="self.parent.link. addToOrders(32068)">ショッピング カートに追加</a> <br>link はナビゲーション フレームを表し、arrOrders 配列は link.html ページで定義されています。製品の ID であり、関数 addToOrders() はその隣の製品 [購入のクリック イベントの場合] リンクに応答するために使用されます。この例では、受け取るパラメーター ID は製品の ID を表します。 ID が 32068 の製品: <br> </div> <br><br><br>コードをコピー <br><div class="codetitle"> <span> コードは次のとおりです:<a style="CURSOR: pointer" data="54486" class="copybut" id="copybut54486" onclick="doCopy('code54486')"><u> </u>< ;script language="JavaScript" type="text/javascript"> </a><!-- </span>var arrOrders=new Array( ); </div>function addToOrders(id){ <div class="codebody" id="code54486">arrOrders.push (id); <br>} <br>//-> <br></script> <br><br> <br>このようにして、チェックアウト ページまたはショッピング カートの閲覧で arrOrders を使用できます。ページにアクセスして、すべての製品を購入する準備を整えます。 <br>フレームワークは、ページを独立した機能を持つ複数のモジュールに分割することができ、各モジュールは互いに独立していますが、ウィンドウオブジェクトの参照を通じて接続することができます。これは Web 開発において重要なメカニズムです。 <br><br>このページで参照されている Iframe ページ内のコントロールの値は、直接書き込むことができます: </div> <br><br><br><br>コードをコピー<br><div class="codetitle"> <span> コードは次のとおりです。 <a style="CURSOR: pointer" data="81189" class="copybut" id="copybut81189" onclick="doCopy('code81189')"><u> </u>function test() { </a>var num = window.iframename.inputtextname.value; </span>alert( num ); 🎜> </div>このページの Iframe がページ内の JS コードを呼び出したい場合は、次のように直接書くことができます: <div class="codebody" id="code81189"><input value="click" type="button"onclick="window.parent.test ()" /><br> </div> </div> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
