1。モダルディアログとは何ですか?
showmodaldialogは、window.openのようにjswindowオブジェクトの方法です。
違いは、showmodaldialogが開かれた後、親ウィンドウが焦点を獲得できないことです(つまり、操作できません)。
window.returnValueの値をサブウィンドウで設定して、親ウィンドウがこのreturnValueを取得できるようにすることができます。
2。一例
1)メインウィンドウのmain.html、
2)showmodaldialog経由でメインウィンドウでsub -window sub.htmlを開きます
3)サブウィンドウでreturnValueを設定し、メインウィンドウに戻って使用する
main.html
次のようにコードコードをコピーします。
<html>
<head>
<medaname = "generator" content = "oscar999">
</head>
<スクリプト>
functionshowmodal()
{{
varret = window.showmodaldialog( "sub.html?temp ="+math.random());
alert( "subreturnvalueis"+ret);
}
</script>
<body>
<inputId = button1type = buttonvalue = "opensub" name = button1onclick = "showmodal();" >>
</body>
</html>
sub.html
次のようにコードコードをコピーします。
<html>
<head>
<medaname = "generator" content = "oscar999">
</head>
<スクリプト>
functionreturnmain()
{{
window.returnvalue = "returnfromsub";
window.close();
}
</script>
<body>
<inputId = button1type = buttonvalue = "returnandclose" name = button1onclick = "returnmain()">
</body>
</html>
特別な説明:main.htmlのshowmodaldialogの方法の場合、math.random()を使用する目的は、キャッシュを避けることです。
3.showmodaldialog詳細
vreturnvalue = window.showmodaldialog(surl [、varguments] [、sfeatures]))
SURL
パラメーターを選択する必要があります、タイプ:文字列。 URLは、ダイアログボックスに表示されるドキュメントを指定するために使用されます。
varguments
オプションのパラメーター、タイプ:バリアント。パラメーターをダイアログボックスに渡すために使用されます。通過したパラメータータイプは、配列などを含めて制限されていません。ダイアログボックスには、Window.Dialogargumentsを介して渡されたパラメーターが取得されます。
sfeatures
オプションのパラメーター、タイプ:文字列。ダイアログボックスの外観とその他の情報を説明するために使用すると、以下の1つ以上を使用して、セグメントを使用できます。
ダイアログハイツの高さ(100px以上、IE4の対話装置がem)、IE5はModalダイアログボックスを定義する場合、PXをユニットとして使用します。
ダイアログウィッド:ダイアログボックスの幅。
ダイアログレフト:デスクトップの左からの距離。
ダイアログトップ:デスクトップからの距離。
センター:{はい|。
ヘルプ:{はい|。
resizable:{はい|。デフォルト番号
ステータス:{はい|。デフォルトはyes [modeless]またはno [modal]です。
スクロール:{はい|デフォルトはイエスです。
HTAで使用されるいくつかの属性がありますが、一般的に一般的なWebページでは使用されていません。
対話:{はい|デフォルトはいいえです。
エッジ:{sunken |。デフォルトは昇給です。
adorned:はい|
4。ブラウザの互換性
しかし、すべてのブラウザがこの使用法と互換性があるわけではありません。
上記の例をChromeで実行すると、親のウィンドウはウィンドウと同じ焦点を取得でき、取得したReturnvaleも定義されています。
以下は、この方法に関する主流のブラウザのサポートです。
ブラウザ | サポートするかどうか | 州 |
IE9 | ○ | |
Firefox13.0 | ○ | |
Safari5.1 | ○ | |
Chrome19.0 | × | モーダルダイアログボックスではありませんが、オープンには新しいウィンドウがあります |
Opera12.0 | × | 窓でさえなく、すべてが起こりました |
Vargumentsにウィンドウに導入されたパラメーターがある場合:
次のようにコードコードをコピーします。
var return = window.showmodaldialog( "sub.html?temp ="+math.random()、window);
サブウィンドウでは、次の値が次のとおりです。
ブラウザ | モーダルダイアログ | window.opner | window.dialogarguments | returnValue |
IE9 | ○ | 未定義 | [オブジェクトウィンドウ] | ○ |
Firefox13.0 | ○ | [ObjectWindow] | [ObjectWindow] | ○ |
Safari5.1 | ○ | [ObjectWindow] | [ObjectWindow] | ○ |
Chrome19.0 | × | [ObjectWindow] | 未定義 | × |
Firefoxブラウザの下では、サブウィンドウが更新されている場合、window.dialogargumentsはまだ失われ、未定義になることに注意してください。上記の結果では、Return Value ReturnValueはChromeブラウザのみが未定義で返され、他のブラウザに問題がないことがわかります。
5。クロムの互換性を解決する方法。
方向は:window.opner.returnvalue = "" "を設定します
main.html
次のようにコードコードをコピーします。
<html>
<head>
<Meta name = "general" content = "oscar999">
</head>
<スクリプト>
関数showmodal()
{{
var return = window.showmodaldialog( "sub.html?temp ="+math.random()、window);
// Chromeの場合
if(ret == undefined)
{{
ret = window.returnValue;
}
アラート( "サブリターン値は"+ret);
}
</script>
<body>
<入力id = button1タイプ=ボタン値= "open sub" name = button1 onclick = "showmodal();" >>
</body>
</html>
sub.html
次のようにコードコードをコピーします。
<html>
<head>
<Meta name = "general" content = "oscar999">
</head>
<スクリプト>
function returnmain()
{{
if(window.opner!=未定義)
{{
window.opner.returnvalue = "subからのreturn";
} それ以外 {
window.returnvalue = "subからのreturn";
}
window.close();
}
</script>
<body>
<入力id = button1タイプ=ボタン値= "return and close" name = button1 onclick = "returnmain()">
</body>
</html>
これは、特定のオブジェクトがブラウザを区別するために定義されているかどうかを判断するためです。もちろん、ブラウザタイプのタイプを判断することもできます
これは、親ウィンドウのreturnValueを使用するために使用されます。
var oldvalue = window.returnValue;
var newValue = showmodaldialog()
window.returnvalue = oldvalue
6. Chromeの下でのテストは、HTTP URLの下でテストにアクセスするためにHTMLファイルをWebサーバー(Tomcat、...)に配置する必要があることに注意する必要があります。そうでなければ、成功しません。