ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript 子ウィンドウでの親ウィンドウ オブジェクトの操作 ModalDialog_基礎知識

JavaScript 子ウィンドウでの親ウィンドウ オブジェクトの操作 ModalDialog_基礎知識

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

ModalDialog
1 での親ウィンドウ オブジェクトの操作 window.parent
Window.parent はフレーム内での操作に使用されますが、フレーム内での親ウィンドウ オブジェクトの操作には使用できません。

2. 正しいアプローチ
modaldialog を呼び出すときにパラメータを渡す
例:
要件
親ウィンドウ ページは .html です。 window ページは b.html です。 a.html に test1 という ID のテキスト ボックスがあります。開いたダイアログ ボックスのボタンをクリックして、a.html のテキスト ボックスの値を「サブウィンドウの値」に変更します。
実装
ダイアログボックスを開くときに、test1 をパラメータとしてサブウィンドウに渡し、サブウィンドウでパラメータを取得し、パラメータオブジェクト (つまり、テキストオブジェクト) の value 属性値を設定します。 a.html) に「サブウィンドウ」ウィンドウ値に渡されます。
注: ここでは ID のみを渡すことができ、名前は渡せません
a.html コードは次のとおりです

コードをコピー コードは次のとおりです:




a.html
>




b.html コードは次のとおりです:


コードをコピーします。 コードは次のとおりです:
b.html
function func1(){
//親ウィンドウによる
var ptextid = window.dialogArguments;
if(ptextid != unknown ){
//親ウィンドウから渡されたオブジェクトの値を「子ウィンドウの値」に変更します
ptextid.value = "子ウィンドウの値";
//子ウィンドウを閉じる
}
}




操作する必要がある親ウィンドウ オブジェクトが多数ある場合は、子ウィンドウに渡すパラメーターとして window または window.document を使用することもできます。
例:
要件
a.html に ID が「aform」のフォームを追加します。上記の操作に加えて、フォーム内に ID が test2 のテキスト ボックスがあります。 , また、test2の値を「サブウィンドウの値2」に変更し、c.htmlにフォームを送信します。
実装 1
a.html のダイアログ ボックスを開く関数を次のメソッドに変更します。
window.showModalDialog(“b.html”, window.document);
b の func1 を変更します。 .html () は次のように変更されます:



コードをコピーします


コードは次のとおりです:


function func1(){

実装 2
子ウィンドウでは親ウィンドウに対する操作が多いため、execScript を使用して実装することもできます。
a.html でダイアログ ボックスを開く関数を次のように変更します。




コードをコピーします

コードは次のとおりです。


window.showModalDialog(“b.html”, window);
次のように JavaScript 関数を追加しますコードをコピー

コードは次のとおりです。

function func(){
test1.value="子ウィンドウ値"; >document.all.test2.value=" 子ウィンドウの値 2'';
aform.action="c.html" aform.submit() } b.html の func1() を次のように変更します。


コードをコピーします


コードは次のとおりです:

関数 func1(){
var pwin = window.dialogArguments;
if(pwin!=unknown){
var codeStr = ”func();” ,”javascript”); window.close( ) } }
showModalDialog と showModelessDialog の使用体験 - 再投稿

1. showModalDialog と showModelessDialog の違いは何ですか?
showModalDialog: 開かれた後、入力フォーカスは常に維持されます。ダイアログ ボックスを閉じない限り、ユーザーはメイン ウィンドウに切り替えることはできません。アラートの操作効果と同様。
showModelessDialog: 開いた後、ユーザーは入力フォーカスをランダムに切り替えることができます。メイン ウィンドウには影響しません (せいぜいしばらくブロックされます。)

2. showModalDialog と showModelessDialog のハイパーリンクが新しいウィンドウをポップアップしないようにするにはどうすればよいですか?
開いた Web ページに を追加するだけです。この文は通常、 と の間に配置されます。

3. showModalDialog と showModelessDialog のコンテンツを更新するにはどうすればよいですか?
showModalDialog および showModelessDialog では F5 キーを押して更新できず、メニューもポップアップできません。これは JavaScript のみに依存します。以下は関連するコードです:
”reload ” href=”filename.htm” style=”display:none”>reload…
filename.htm を Web ページの名前に置き換えて、開いている Web ページに挿入します。 F5 を押してください。更新できます。これは と組み合わせて使用​​する必要があることに注意してください。そうしないと、F5 を押すと新しいウィンドウがポップアップします。


4. showModalDialog (または showModelessDialog) によって開かれたウィンドウを JavaScript を使用して閉じる方法
とも一致します。一致しない場合は、新しい IE ウィンドウが開いてから閉じられます。


5. ShowModalDialog と showModelessDialog のデータ転送スキル (作者注: 本当は質疑応答形式で書こうと思ったのですが、質問の仕方がわかりませんでした)これは、そうしなければなりませんでした。)
これは何度も変更しており、説明できないので、例を使って説明します。 。


: 次に、showModalDialog (または showModelessDialog) で変数 var_name を読み取るか、設定する必要があります。
一般的な配信方法:

コードをコピー コードは次のとおりです:
window.showModalDialog(“filename.htm”,var_name)
//Pass var_name 変数
showModalDialog (または showModelessDialog) で読み取りおよび設定する場合:
alert(window.dialogArguments)//var_name 変数を読み取ります
window.dialogArguments=”oyiboy”//var_name 変数を設定します
これ 方法としては満足なのですが、var_nameを操作中に2番目の変数var_idも操作したい場合はどうすればよいでしょうか?操作できなくなります。これがこの配信方法の制限です。
私が推奨する配信方法は次のとおりです:
window.showModalDialog("filename.htm",window)
//操作したい変数に関係なく、メイン ウィンドウの window オブジェクトのみを渡します。直接
showModalDialog (または showModelessDialog) が読み取りおよび設定する場合:
alert(window.dialogArguments.var_name)//var_name 変数を読み取ります
window.dialogArguments.var_name=”oyiboy”//var_name 変数を設定します
同時に var_id 変数を操作することもできます
alert(window.dialogArguments.var_id)//var_id 変数を読み取ります
window.dialogArguments.var_id=”001″//var_id 変数を設定します
フォーム オブジェクト内の要素など、オブジェクトが操作されるメイン ウィンドウを設定することもできます。
window.dialogArguments.form1.index1.value="これは、index1 要素の値を設定しています"


6. 複数の showModelessDialog の相互作用 ただ言うのは大変なので、面倒なのでコードで直接説明します。わからない場合は、(oyiboy#163.net(#を@に変えてください))に書いて聞いてください。
次のコードの主な機能は、showModelessDialog 内で別の showModelessDialog の位置を移動することです。
メインファイルのjsコードの一部。

コードをコピー コードは次のとおりです。
var s1=showModelessDialog('control.htm ',window ,"dialogTop:1px;dialogLeft:1px") //コントロール ウィンドウを開きます
var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px") //コントロール ウィンドウを開きます制御されたウィンドウ

.htm コードの制御部分。

コードをコピー コードは次のとおりです: