JavaScriptフレームワークワークまとめ 4657 ワード JavaScript iframe フレームプログラミングの概要一つのHTMLページには、独立したHTMLページを表示するためにというサブフレームがあります。ここでいうフレームプログラミングは、フレームの自己制御とフレーム間の相互アクセスを含み、例えば、別のフレームのJavaScript変数を参照したり、他のフレーム内の関数を呼び出したり、他のフレーム内のフォームの挙動を制御したりする。<br>フレーム間の相互参照<br>一つのページのすべてのフレームは、集合としてwindowオブジェクトの属性として提供されます。例えば、window.frameは、このページ内のすべてのフレームのセットを表します。これはフォームオブジェクト、リンクオブジェクト、ピクチャオブジェクトなどと同様で、これらのセットはdocumentの属性です。したがって、サブフレームを参照するには、次のような文法が使えます。<pre><code><code>window.frames["frameName"];<br/>window.frames.frameName<br/>window.frames[index]</code></code></pre>では、window文字もselfで代替または省略できます。frame Nameがページの最初のフレームであると仮定すると、次のような書き方は等価です。<pre><code><code>self.frames["frameName"]<br/>self.frames[0]<br/>frames[0]<br/>frameName</code></code></pre>の各フレームは一つのHTMLページに対応しています。このフレームも独立したブラウザウィンドウです。フレームに対する引用とは、windowオブジェクトの参照である。このwindowオブジェクトがあれば、その中のページを簡単に操作できます。例えばwindow.documentオブジェクトを使ってページにデータを書き込み、window.location属性を使ってフレーム内のページを変更するなどです。<br>それぞれの階層のフレーム間の相互参照を紹介します。<br>1.親枠からサブフレームへの参照<br>上記の原理を知ると、親フレームからサブフレームを引用することは容易になります。つまり、<pre><code><code>window.frames["frameName"];</code></code></pre>は、ページ内名をframe Nameとするサブフレームを引用しました。サブフレーム内のサブフレームを参照するなら、参照のフレームワークによって、実際にはwindowオブジェクトの性質である。これにより、<pre><code><code>window.frames["frameName"].frames["frameName2"];</code></code></pre>は、2つのサブフレームに引用され、これに類推して、多層フレームの参照が可能になる。<br>2.サブフレームから親フレームへの参照<br>各windowオブジェクトにはparent属性があり、その親フレームを表しています。このフレームが最上階のフレームであるならば、window.parentはまたフレーム自体を表している。<br>3.兄弟フレーム間の引用<br>2つのフレームが同じフレームのサブフレームである場合、兄弟フレームと称され、相互参照は親フレームで実現され得る。例えば、1つのページは2つのサブフレームを含む。<pre><code><code><br/> <frame src="1.html" name="frame1" /><br/> <frame src="2.html" name="frame2" /><br/></frameset></code></code></pre>は、frame 1において、次のような文を使用してframe 2：<pre><code><code>self.parent.frames["frame2"];</code></code></pre>を参照することができる。<br>4.異なる階層のフレーム間の相互参照<br>フレームの階層はトップフレームに対するものである。レベルが違っている場合、自分のいるレベルと別のフレームのあるレベルと名前を知っていれば、フレームを利用して参照されるwindowオブジェクトの性質を利用して、相互訪問が容易に実現できます。例えば、<pre><code><code>self.parent.frames["childName"].frames["targetFrameName"];</code></code></pre>5.トップフレームへの参照<br>parent属性と似ています。windowオブジェクトにはもう一つのtop属性があります。これは、トップフレームへの参照を表しており、これは、フレーム自体がトップフレームであるかどうかを判断するために使用され得る。例えば、<pre><code><code>//判断本框架是否为顶层框架<br/>if(self==top){<br/> //dosomething<br/>}</code></code></pre>。<br>フレームの読み込みページを変更します。<br>フレームに対する参照は、windowオブジェクトへの参照であり、windowオブジェクトのlocation属性を利用して、フレームのナビゲーションを変えることができます。例えば、<pre><code><code>window.frames[0].location="1.html";</code></code></pre>は、ページの最初のフレームのページを1.にリダイレクトします。この性質を利用して、リンクを使って複数のフレームを更新することもできます。<pre><code><code><br/> <frame src="1.html" name="frame1" /><br/> <frame src="2.html" name="frame2" /><br/></frameset><!--somecode--><br/><a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a><br/><!--somecode--></code></code></pre>他のフレーム内のJavaScript変数と関数を参照して、他のフレーム内のJavaScript変数と関数を引用する技術を紹介する前に、まず以下のコードを見ます。<pre><code><code>function hello(){<br/> alert("hello,ajax!");<br/>}<br/>window.hello();</code></code></pre>がこのコードを実行したら、「ハロー、ajax！」これはハロー関数を実行した結果です。なぜハローはwindowの対象になったのですか？一つのページで定義されているグローバル変数とグローバル関数はすべてwindowオブジェクトのメンバーです。例えば：var a=1alert（window.a）コード」が表示されます。同じ原理で、変数と関数を異なるフレーム間で共有することは、windowオブジェクトを通じて呼び出すことです。例えば、一つの商品閲覧ページは二つのサブフレームからなり、左側は商品分類のリンクを表します。ユーザーが分類リンクをクリックすると、右側に該当する商品リストが表示されます。ユーザーは商品の隣の【購入】リンクをクリックして商品をカートに入れることができます。この例では、ユーザーがナビゲーションリンクをクリックすると、変化するのは別のページ、すなわち商品展示ページであり、ナビゲーションページ自体は変化しないので、JavaScript変数は失われず、グローバルデータを格納するために使用されてもよい。その実現原理は以下の通りです。左側ページがlink.htmlであり、右ページがshow.htmlであると仮定して、ページ構造は以下の通りです。<br>ショーで展示されている商品の隣には、「a href=「void（0）」onclick=「self.parent.link.addToOrders（32068）」という文があります。ショッピングカートに参加します。ここでlinkはナビゲーションフレームを表しています。arrOrders配列をクリックして商品を格納するidader Tordsを定義します。これは、商品のIDを受信したパラメータです。例えば、idは32068の商品です。<pre><code><code><br/><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br/><html><br/><head><br/><title> New Document </title><br/></head><br/><frameset cols="20%,80%"><br/> <frame src="link.html" name="link" /><br/> <frame src="show.html" name="show" /><br/></frameset><br/></html><br/></code></code></pre>このように、決算ページやショッピングカートの閲覧ページでは、arrOrdersを使ってすべての購入準備商品を取得することができます。フレームワークは、一つのページを機能の独立した複数のモジュールに分割することができ、各モジュール間は独立しているが、windowオブジェクトの参照によってリンクを確立することもでき、Web開発の重要なメカニズムである。Ajax開発においても、隠しフレームを利用して様々な技術を実現することができます。Ajaxインスタンスのプログラミングを紹介すると、アップロードファイルの更新やAjaxの前進・後退問題の解決にもこの技術が使われていることが分かります。 Javascript Websocket使用例紹介（簡明入門教程） JS実現の簡単なAutocomplette自動完成例