JavaScript フレームワークの使用 ウィンドウ オブジェクトについて話したときに、フレーム内の Web ページもウィンドウ オブジェクトであると述べました。つまり、Frame オブジェクトもウィンドウ オブジェクトです。最もわかりやすい用語では、各 HTML ファイルは、フレームを定義する Web ページ (「フレーム Web ページ」) を含むウィンドウ オブジェクトを占めます。 IE では、「」タグを使用してドキュメントに挿入されたフレームもウィンドウ オブジェクトですが、「Web ページを含める」メソッド (HTML では「<!--webbot bot="include」と表示されます) を使用します。 ... -->") HTML 読み取りは別のウィンドウ オブジェクトを占有しません。各フレームは、そのページを含むウィンドウ オブジェクトのサブオブジェクトです (「プロパティ」と呼ぶべきかどうかはわかりません)。これを参照するには、次のメソッドのいずれかを使用できます: <br> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">window.frames[x] window.frames['frameName'] window.frameName</pre><div class="contentsignin">ログイン後にコピー</div></div> <p> ここで、x はウィンドウ オブジェクトで指定されたフレームを指します。他の配列と同様に、x もゼロから始まります。 FrameName はフレームの名前を指し、<frame> の「name」属性と同じです。 <br/><br/> window.frameName を使用して指定されたウィンドウ オブジェクトがフレーム Web ページでもある場合、そのフレームを参照するメソッド: window.frameName.subFrameName。等々。 <br/><br/> 「ウィンドウ」オブジェクトがどこで参照されても、返されるのは「現在の」ウィンドウ オブジェクトであることに注意してください。他のウィンドウ オブジェクトにアクセスしたい場合は、parent 属性と top 属性を使用する必要があります。 parent は、現在のウィンドウ オブジェクトを含むフレーム Web ページである「親」ウィンドウ オブジェクトを指します。top は、ウィンドウの上部にあるウィンドウ オブジェクトを指します。 <br/><br/> フレームワークを使用する場合は、JavaScript で定義されているグローバル変数とカスタム関数にも細心の注意を払う必要があります。これらはすべて、それらが属するウィンドウ オブジェクトに属します。他のフレームワークでグローバル変数やカスタム関数を参照するには、「Windowオブジェクト.Frameオブジェクト[.Frameオブジェクト...].グローバル変数またはカスタム関数」という面倒な方法を使わなければなりません。 <br/><br/> 上記の問題は、接続を確立するときに無視されることがよくあります。デフォルトのターゲット ウィンドウが <head> (<base target="...">) で定義されている場合、<a href= 「javascript:...」> では、入力した JavaScript ステートメントがデフォルトのターゲット ウィンドウで実行されることを理解し、必要に応じて「parent」属性と「top」属性を追加する必要があります。 <br/><br/>フレーム プログラミングの概要 <br/>HTML ページには、<iframe> でマークされ、独立した HTML ページを表示するために使用される 1 つ以上のサブフレームを含めることができます。ここで説明するフレームワークプログラミングには、あるフレームワークから別のフレームワークのJavaScript変数を参照したり、他のフレームワークの関数を呼び出したり、別のフレームワークのフォームの動作を制御したりするなど、フレームワークの自己制御やフレームワーク間の相互アクセスが含まれます。 <br/>フレーム間の相互参照</p><p>ページ内のすべてのフレームは、ウィンドウ オブジェクトの属性としてコレクションの形式で提供されます。たとえば、window.frames はページ内のすべてのフレームのコレクションを表します。 form オブジェクト、link オブジェクト、picture オブジェクトなどと同じですが、違いは、これらのコレクションがドキュメントの属性であることです。したがって、サブフレームを参照するには、次の構文を使用できます。 <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">window.frames["frameName"]; window.frames.frameName window.frames[index]</pre><div class="contentsignin">ログイン後にコピー</div></div><p> このうち、frameName が最初のフレームであると仮定すると、window という単語を self に置き換えたり省略したりすることもできます。 <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">self.frames["frameName"] self.frames[0] frames[0] frameName</pre><div class="contentsignin">ログイン後にコピー</div></div><p>各フレームは HTML ページに対応するため、このフレームは独立したブラウザ ウィンドウでもあり、ウィンドウのすべてのプロパティを持ちます。いわゆるフレームへの参照、つまりウィンドウ オブジェクトへの参照です。この window オブジェクトを使用すると、window.document オブジェクトを使用してページにデータを書き込んだり、window.location プロパティを使用してフレーム内のページを変更したりするなど、その中のページを簡単に操作できます。 <br/>以下では、異なるレベルのフレームワーク間の相互参照を紹介します。 <br/>1.親フレームから子フレームへの参照 <br/> 上記の原理を知っていると、親フレームから子フレームを参照するのは非常に簡単です。つまり、<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">window.frames["frameName"];</pre><div class="contentsignin">ログイン後にコピー</div></div><p>このようにして、frameNameページ内のサブフレームが参照されます。サブフレーム内のサブフレームを参照したい場合は、参照されるフレーム (実際にはウィンドウ オブジェクト) の性質に従って、次のように実装できます。 <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">window.frames["frameName"].frames["frameName2"];</pre><div class="contentsignin">ログイン後にコピー</div></div><p>この方法では、第 2 レベルのサブフレームが参照されるなど、多層フレームワークへの参照を実装できます。 <br/><br/>2．子フレームから親フレームへの参照 <br/>各ウィンドウオブジェクトには、親フレームを表すparent属性があります。フレームがすでにトップレベルのフレームである場合、window.parent はフレーム自体も表します。 <br/><br/>3．兄弟フレーム間の参照 <br/> 2 つのフレームが同じフレームのサブフレームである場合、それらは親フレームを通じて相互に参照できます。たとえば、ページには 2 つのサブフレームが含まれます。 🎜><br/></p>フレーム 1 では、次のステートメントを使用してフレーム 2 を参照できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><frameset rows="50%,50%"> <frame src="1.html" /> <frame src="2.html" /> </frameset></pre><div class="contentsignin">ログイン後にコピー</div></div><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">self.parent.frames["frame2"];</pre><div class="contentsignin">ログイン後にコピー</div></div><p>4．不同层次框架间的互相引用 <br/>框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如： <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">self.parent.frames["childName"].frames["targetFrameName"];</pre><div class="contentsignin">ログイン後にコピー</div></div><p>5．对顶层框架的引用 <br/>和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如： <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">//判断本框架是否为顶层框架 if(self==top){ //dosomething }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>改变框架的载入页面 <br/>对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如： <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">window.frames[0].location="1.html";</pre><div class="contentsignin">ログイン後にコピー</div></div><p>这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。 <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><frameset rows="50%,50%"> <frame src="1.html" /> <frame src="2.html" /> </frameset> <!--somecode--> <a href="frame1.location='3.html;frame2.location='4.html'" >link</a> <!--somecode--></pre><div class="contentsignin">ログイン後にコピー</div></div><p>引用其他框架内的JavaScript变量和函数 <br/>在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码： <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script language="JavaScript" type="text/javascript"> <!-- function hello(){ alert("hello,ajax!"); } window.hello(); //--> </script></pre><div class="contentsignin">ログイン後にコピー</div></div><p>如果运行了这段代码，会弹出“hello,ajax!”的窗口，这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢？因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如： <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">var a=1; alert(window.a);</pre><div class="contentsignin">ログイン後にコピー</div></div><p>就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。 <br/>例如：一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。 <br/>在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下： <br/>假设左侧页面为link.html，右侧页面为show.html，页面结构如下： <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> </head> <frameset cols="20%,80%"> <frame src="link.html" /> <frame src="show.html" /> </frameset> </html></pre><div class="contentsignin">ログイン後にコピー</div></div><p>在show.html中展示的商品旁边可以加入这样一条语句： <br/><a href="void(0)" >加入购物车</a> <br/>其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品： <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script language="JavaScript" type="text/javascript"> <!-- var arrOrders=new Array(); function addToOrders(id){ arrOrders.push(id); } //--> </script></pre><div class="contentsignin">ログイン後にコピー</div></div><p>这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。 <br>框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。在Ajax开发中，还可以利用隐藏框架实现各种技巧，在后面介绍Ajax实例编程时可以发现，无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。<br></p>
