ホームページ > 記事 > ウェブフロントエンド > Frameset、frame、iframe_javascriptスキルのjs操作サンプルコード

Frameset、frame、iframe_javascriptスキルのjs操作サンプルコード

WBOYオリジナル: 2016-05-16 17:25:281149ブラウズ

フレームプログラミングの概要
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%"&gt ; </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> <div class="codebody" id="code51282"><a href="frame1.location='3.html;frame2.location='4.html'" >リンク&lt ;/a> <br><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"&gt ; </div><html> <div class="codebody" id="code72240"><title> <br></head> %"> <br>< フレーム src="link.html"name="link" /> <br><フレーム src="show.html"name="show" /> <br>&lt ;/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>&lt ;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>

声明：

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

前の記事：JavaScript による HTML 静的ページパラメーターの渡し値の取得 Example_javascript のヒント次の記事：JavaScript による HTML 静的ページパラメーターの渡し値の取得 Example_javascript のヒント

関連記事

続きを見る