window.showModalDialog()戻り値_javascriptスキルの学習体験まとめ

まず window.showModalDialog の基本的な使い方について話しましょう

showModalDialog() (IE 4 でサポート)
showModelessDialog() (IE 5 でサポート)
window.showModalDialog() メソッドは、HTML コンテンツを表示するモーダル ダイアログ ボックスを作成するために使用されます。
window.showModelessDialog() メソッドは、HTML コンテンツを表示する非モーダル ダイアログ ボックスを作成するために使用されます。

使用法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFunctions])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeature])

パラメータの説明:
sURL -- 必須パラメータ、タイプ: 文字列。ダイアログボックスに表示するドキュメントのURLを指定するために使用します。

vArguments -- オプションのパラメーター、タイプ: バリアント。パラメータをダイアログ ボックスに渡すために使用されます。渡されるパラメータのタイプは、配列などを含めて制限されません。ダイアログ ボックスは、window.dialogArguments を通じて渡されたパラメータを取得します。

sFunction -- オプションのパラメータ、タイプ: 文字列。ダイアログ ボックスの外観やその他の情報を記述するために使用され、次の 1 つ以上をセミコロン「;」で区切って使用できます。

1.dialogHeight:ダイアログ ボックスの高さ (100 ピクセル以上)。IE4 では、dialogHeight と DialogWidth のデフォルト単位は em ですが、IE5 では便宜上、モーダルを定義します。モードダイアログボックスの場合、単位はpxを使用します。
2.dialogWidth: ダイアログの幅。
3.dialogLeft: 画面の左側からの距離。
4.dialogTop: 画面からの距離。
5.center: {yes | no | 1 | 0}: ウィンドウが中央にあるかどうか、デフォルトははいですが、高さと幅は指定できます。
6.help: {yes | no 1 | 0}: ヘルプ ボタンを表示するかどうか。デフォルトは [はい] です。
7.resizable: {はい | いいえ | 0 } [IE5]: サイズ変更できるかどうか。デフォルトは「いいえ」です。
8.status: {はい | いいえ | 0} [IE5]: ステータス バーを表示するかどうか。デフォルトは、yes[Modal] または no[Modal] です。
9.scroll:{ はい | いいえ 1 | 0 | ダイアログ ボックスにスクロール バーを表示するかどうかを示します。デフォルトは「はい」です。

次の属性は HTA で使用され、通常の Web ページでは通常使用されません。
10.dialogHide:{ はい | いいえ 1 | 0 | オフ }: 印刷中または印刷プレビュー中にダイアログ ボックスを非表示にするかどうか。デフォルトは「いいえ」です。
11.edge:{ sunken | raise }: ダイアログ ボックスの境界線のスタイルを指定します。デフォルトは引き上げられています。
12.unadorned:{ はい | いいえ 1 | 0 | デフォルトはいいえです。

パラメータの受け渡し:
1. パラメータをダイアログ ボックスに渡すには、vArguments を介してパラメータを渡します。文字列型の場合、最大長は 4096 文字です。オブジェクトを渡すこともできます。例:

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

<script><br>var obj = new Object();<br>obj.name="ttop";<br>window.showModalDialog("test.htm",obj,"dialogWidth=200px;dialogHeight=100px" );<br> </script>
test.htm
<script><br>var obj = window.dialogArguments<br>alert("渡したパラメータは次のとおりです: " obj.name)<br></ script><br> </div> <br>2. window.returnValue を使用して、ダイアログ ボックスが開かれているウィンドウに情報を返すことも、もちろんオブジェクトにすることもできます。例: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="64276" class="copybut" id="copybut64276" onclick="doCopy('code64276')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code64276"> <br><script><br>str =window .showModalDialog("test.htm",,"dialogWidth=200px;dialogHeight=100px");<br>alert(str);<br></script>
test.htm
<スクリプト>
window.returnValue="/";

1. showModalDialog と showModelessDialog の違いは何ですか?

showModalDialog: 開かれた後、入力フォーカスは常に維持されます。ダイアログ ボックスを閉じない限り、ユーザーはメイン ウィンドウに切り替えることはできません。アラートの操作効果と同様。

showModelessDialog: 開いた後、ユーザーは入力フォーカスをランダムに切り替えることができます。メインウィンドウには影響しません (せいぜいしばらくブロックされるだけです。:P)

2. showModalDialog と showModelessDialog のハイパーリンクが新しいウィンドウをポップアップしないようにするにはどうすればよいですか?

開いた Web ページに を追加するだけです。この文は通常、 と の間に配置されます。

3. showModalDialog と showModelessDialog のコンテンツを更新するにはどうすればよいですか?

showModalDialog および showModelessDialog では F5 キーを押して更新できず、メニューもポップアップできません。これは JavaScript のみに依存します。関連するコードは次のとおりです:

リロード...

filename.htm を Web ページの名前に置き換え、F5 キーを押して更新します。そうでない場合は、これを と組み合わせて使用​​する必要があります。 F5 を押すと、新しいウィンドウが表示されます。

4. showModalDialog (または showModelessDialog) によって開かれたウィンドウを JavaScript を使用して閉じる方法。

とも連携します。そうでない場合は、新しい IE ウィンドウが開いてから閉じられます。

5. showModalDialog と showModelessDialog のデータ転送スキル。
(筆者注: 本来は一問一答形式で書きたかったのですが、質問の仕方がわからなかったのでこうすることにしました。)

これは何度か変更しているのですが、明確に説明できないわけではないので（私の言語能力はますます低下しています）、例を使って説明する必要があります。

例: 次に、showModalDialog (または showModelessDialog) で変数 var_name

を読み取るか設定する必要があります。

一般的な配信方法:
window.showModalDialog("filename.htm",var_name)
//var_name 変数を渡す
showModalDialog (または showModelessDialog) で読み取って設定する:
alert(window.dialogArguments)//var_name変数を読み込む
window.dialogArguments="oyiboy"//var_name変数を設定する
この方法でも十分ですが、var_nameを操作したい場合はどうでしょうか？ 2 番目のバリエーション var_id は同時に操作されますか?操作できなくなります。これがこの配信方法の制限です。

私が推奨する配信方法は次のとおりです:
window.showModalDialog("filename.htm",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 要素の値を設定します"

親ページで onClick=""var reVal = window.showModalDialog('changephoto.htm','dialogWidth:500px;dialogHeight:300px;help:no') を使用します);if (typeof(reVal) != 'unknown') {form.textname.value=reVal;}"" cursor:hand "">画像を変更するにはここをクリックしてください

ワード ウィンドウでフレームセット「changephoto.htm」を開きます。フレームセットには、asp ファイルが含まれています。まず、asp 値をchangephoto.htm に返し、次にこの値をメイン ページに返します。

changephoto.htm:

function onClose() { window.returnValue = form1.save.value;//window.returnValue を window.dialogArguments.oblogform.blogimage.value window.close() に変更することもできます }

ASP ファイル:parent.document.form1.save.value="値または変数";