まとめ:サブウィンドウの作成と親ウィンドウと子ウィンドウの通信
5518 ワード
1、Javascriptはサブウィンドウをイジェクトして様々な方法で実現できます.いくつかの方法(1)はwindowオブジェクトのopen()方法を紹介します.open()方法は新しいwindowウィンドウオブジェクトを生成します.その使い方はwindow.open(URL、window Name、parameters)です.URL:開くウィンドウのURLアドレスを説明しますが、どのように空いているかはホームページを開けません.window Name:開けられた窓を説明する民称は、'_'を使用することができます.トップblank'などの内装名は、ここの名称は「a href="…」のtarget=「...」の中のtarget属性と同じです.Parameters:開いているウィンドウのパラメータ値を記述するか、あるいは、ウィンドウの各属性値と、侵入するパラメータ値とを含んでいるイメージです.例えば、400 x 100のクリーンなウィンドウを開きます.
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')
「var newWindow=open('、'、''blank')」とも書くことができます.パラメータの説明は以下の通りです.top=菗ウィンドウの上を離れて画面の上を行く画素数left=菗ウインドウの左端を離れている画素数width=菗ウインドウの幅height=雟ウインドウの高さmenubar=ウィンドウにメニューがありますか?yesまたはno directores=...ウィンドウに接続エリアがありますか?yesまたはno scrollbars=...ウィンドウにスクロールバーがありますか?値を取るyesまたはno status=...ウィンドウにはステータスバーがありますか?値を取るyesまたはno rezable=...ウィンドウはサイズを調整しません.ダイアログを作成することにより、ウィンドウをイジェクトすることもできます.例えば: alert(")////ポップアップメッセージダイアログ confirm(")///ポップアップ情報確認ダイアログ prompt(")///相互作用の性質を持つダイアログですが、上述したポップアップウィンドウが持つ機能はより単一で、より簡単な機能しかできません.ダイアログに複数のデータ情報を表示する必要がある場合は、HTMLコントロールさえも無力です.(3)モダリティダイアログを使用して複雑なダイアログニーズを実現するためのJavascriptのビルド方法には、ダイアログを通じてHTMLコンテンツを表示する方法、つまりダイアログを作成することによって、ウィンドウオブジェクトを作成することができる機能を実現する方法もあります.モード作成ダイアログと非モーダルダイアログの2種類があります. 実现方法は://作成モダリティダイアログwindow.show ModalDialog(s URL、vAgMents、s Feature)//作成モダリティダイアログwindow.show ModelessDialog(s URL、vargments、sFeature)の违いは、show ModelessDialog(ウィンドウを开くときはwindowse.closeではなくてもいいです.ダイアログを開くウィンドウは、常に上のフォーカスではなく、開いているウィンドウのURLが変更されると自動的に閉じられます.モード[IE 4]方式のダイアログは常にフォーカスがあります.モダリティダイアログは、そのウィンドウを開くことと関連していますので、別のウィンドウを開くと、リンク関係はそのまま保存され、アクティブウィンドウの下に隠します.show ModeDialog()はそうではない.パラメータ説明:s URL:必須パラメータ、タイプ:文字列.ダイアログで表示するドキュメントのURLを指定します.vAgments:オプションパラメータ、タイプ:変数.ダイアログにパラメータを転送します.伝達されるパラメータの種類は、配列などに制限されません.ダイアログは、window.dialog AgMentsによって転送されたパラメータを取得します.s Feature:パラメータを選択し、タイプ:文字列.ダイアログの外観などを説明するために、次のいずれかを使用して、セミコロンで区切ってもいいです.dialogHeight:ダイアログの高さは100 px以下で、IE 4のdialogHeightとdialog Widthはデフォルトの単位はemで、IE 5の中はpxで、その見やすさのためにmodal方式のダイアログを定義する時、pxで単位を作ります.dialog Width:ダイアログの幅です.dialogLeft:デスクトップから左の距離です.dialogTop:デスクトップからの距離.センター:ウィンドウが中央にあるかどうかはデフォルトyesですが、それでも高さと幅を指定できます.help:ヘルプボタンのデフォルトyesが表示されているかどうか、取得範囲{yes|の124; 0}.resizable:サイズを変えられますか?デフォルトのno、取値範囲{yes𞓜1|0}[IE 5+]です.ステータスバーが表示されますか?デフォルトはyes[Modeless]またはno[Modal]で、値の範囲{yes|の124; 1|0}[IE 5+]です.scroll:ダイアログがスクロールバーを表示するかどうかを指定します.デフォルトはyesで、値を取る範囲は{yes𞓜ノ124; 1𞓜0 124;オンオフ}です.いくつかの属性はHTAで使われていますが、一般のページでは一般的に使われていません.dialogHide:プレビューを印刷または印刷するときにダイアログが非表示になりますか?デフォルトはnoで、値の範囲を取る.edge:ダイアログの外枠スタイルを指定します.デフォルトはライセン、スコープです.unadorned:デフォルトはnoで、値を取る範囲{yes𞓜ノ124; 0|0𞓜off}です.着信パラメータ:ダイアログでパラメータを転送するには、vAgmentsを通じて伝達されます.タイプは制限されません.文字列の種類に対しては最大4096文字です.例えば、オブジェクトを伝えることもできます.var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,
dialogWidth:300px, status:0, edge:sunken');
newWin.open()window.open()メソッドを使用してウィンドウを作成する場合と比較して、モダリティ方法で作成したウィンドウの違いは、モダリティ方法で作成したウィンドウがあったら親ウィンドウを操作できないことです.取得後のサブウィンドウは、親ウィンドウのリフレッシュや転送などの操作ができます.例えば: window.opener.location.reload(); //
window.opener.location.href // href
window.opener.locaiton.pathname //
//
window.location.href=window.location.href ; //
window.location.reload;
(2)モダリティウィンドウと親ウィンドウとの通信は、show ModelDialog()及びshow ModelessDialog()方法で作成したサブウィンドウが親ウィンドウと通信したい場合、window.openerを通じて親ウィンドウオブジェクトを取得することができません.通信を実現するには、モダリティサブウィンドウを作成する際に、親ウィンドウオブジェクトにサブウィンドウを入力しなければなりません.実現方式は:父の窓口で:var newWin=window.show ModelDialog(url,window,');newWin.open()この時のパラメータwindowは親ウィンドウオブジェクトである.親ウィンドウオブジェクトを最初に取得してから親ウィンドウオブジェクトを使用することができます.親ウィンドウオブジェクトは、サブウィンドウを作成する際にパラメータを入力することによってもたらされるので、サブウィンドウでも親ウィンドウオブジェクトは、ウィンドウパラメータを取得することによってしか取得できない.取得方法は以下の通りです.var parent=widnow.dialogAgMents.変数parentは親ウィンドウのオブジェクトです.たとえば:// :form1,
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();
//
var parent=window.dialogArguments;
parent.location.reload();
//サブウィンドウから親ウィンドウに値を送るには、モダリティサブウィンドウの中で親ウィンドウに値を送るためには、window.returnValueを使って達成方法を完成する必要があります.サブウィンドウでは、親ウィンドウのあるフィールド値を取得し、その値を加算して親ウィンドウvar parent=window.dialog AgMentsに戻ります.var x=parent.docuement.getElement ById(「age」).value;x=x+1;//x値window.returnValue=xを返します.親ウィンドウの中で//サブウィンドウからの値を取得するvar newWin=window.show ModelDialog(url,window,');if(newWin!=null)document.getElement ById(「age」).value=newWin;/親ウィンドウの値をサブウィンドウに設定し、親ウィンドウの値を直接設定していないことがわかります.直接に親ウィンドウの中の要素の値を設定するのはもっと柔軟になりますが、具体的にはどの方法を使うかは実際の状況と既存の実現方法によって決まります.非現実的な方法を使うと、開発効率を下げるだけでなく、実行効率も低下します.サブウィンドウの親ウィンドウの値の使用方法は以下の通りです.サブウィンドウの中:var parent=window.dialogAgMents;var x=parent.document.getElemenntById.value;x=x+1;//親ウィンドウでage属性値parent.document.getElementById(「age」)を設定します.value=x;以上はプロジェクトの中でjavascriptを使ってサブウィンドウの問題を解決する時、いくつか方法と資料を収集して蓄積するのです.モダリティウィンドウを作る方式を使って実現しましたが、window.openを使ってもwindow.show.show ModelDialogを使っても、伝参などの操作を行っても、実現方法に大きな違いがありますが、初めての接触はちょっと乱れています.でも、理清子ウィンドウと父の窓口との関係と役割があれば、よく分かりました.