javascript showModalDialog 値の転送と FireFox の window.open 親子ウィンドウ値の転送 example_javascript スキル

PHP中文网
リリース: 2016-05-16 18:42:11
オリジナル
1270 人が閲覧しました

javascript showModalDialog 値の受け渡しと、FireFox の window.open 親子ウィンドウの値受け渡しのサンプル コード。

最初に基本的な知識を簡単に紹介します:
1. window.open() サポート環境: Java1.0 /J1.0 /Nav2 /IE3 /Opera3
2. 基本的な構文:
window.open(pageURL,name,parameters)
ここで:
pageURL はサブウィンドウのパスです
name はサブウィンドウのハンドルです
parameters はウィンドウのパラメーターです (各パラメーターは、カンマ)
3. パラメータ
このうち、yes/no はピクセル値、つまり単位ピクセルを使用することもできます。
パラメータ | 値の範囲 | 説明
alwaysLowered | 指定されたウィンドウはすべてのウィンドウの後ろに隠れます
alwaysRaized | 依存します| no | 親ウィンドウを同時に閉じるかどうか | Nav2 と 3 のディレクトリ バーを表示するかどうか |
ウィンドウの高さ | はい/いいえ |メニューバーのないウィンドウの場合 CMD セーフ終了 ホットキー
ウィンドウ内のドキュメントのピクセルの高さ
ドキュメントのピクセル幅
位置 | | ロケーションバーが表示されるかどうか
menubar | メニューバーが表示されるかどうか
outerHeight | ウィンドウのピクセルの高さを設定します。ウィンドウのピクセル幅 (装飾境界線を含む) を設定します。
resizable かどうか。
screenX のピクセル値 | >screenY | 画面の上端からのウィンドウのピクセルの長さ
スクロールバーを付けることができるかどうか | ウィンドウのタイトルバーを付けることができるかどうか表示される
ツールバー | はい/いいえ | ウィンドウのツールバーが表示されるかどうか
ピクセル値 | ウィンドウが他のウィンドウの上に表示されるかどうか |アクティブ化後のウィンドウ
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 | 0}: ヘルプ ボタンを表示するかどうか。デフォルトは [はい] です。
7.resizable: {はい | いいえ | 0} [IE5+]: サイズを変更できるかどうか。デフォルトは「いいえ」です。
8.status: {はい | いいえ | 0} [IE5]: ステータス バーを表示するかどうか。デフォルトは、yes[Modal] または no[Modal] です。
9.scroll:{ はい | いいえ | 0 | オフ }: ダイアログ ボックスにスクロール バーを表示するかどうかを示します。デフォルトは「はい」です。
次の属性は HTA で使用され、通常の Web ページでは通常使用されません。
10.dialogHide:{ はい | いいえ | 0 | オフ }: 印刷中または印刷プレビュー中にダイアログ ボックスを非表示にするかどうか。デフォルトは「いいえ」です。
11.edge:{ sunken | raise }: ダイアログ ボックスの境界線のスタイルを指定します。デフォルトは引き上げられています。
12.unadorned:{ はい | いいえ | 0 | オフ }: デフォルトは no です。
パラメータの受け渡し:
1. ダイアログ ボックスにパラメータを渡すには、vArguments を介してパラメータを渡します。文字列型の場合、最大長は 4096 文字です。オブジェクトを渡すこともできます。例:
---------------------------------
parent .htm



コードをコピーします
コードは次のとおりです。


>


---------------------------------
2. 会話を開くことができます。 window.returnValue 経由 フレームのウィンドウは情報を返しますが、もちろんオブジェクトにすることもできます。例:
--------------------------------
parent.htm

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


< type="text/java">
str =window.showModalDialog("modal.htm ",,"dialogWidth= 200px;dialogHeight=100px");
alert(str);


modal.htm

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




IE では、showModalDialog を使用して値を渡すことができます。
構文は次のとおりです:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeature])
ただし、Firefox には showModalDialog メソッドはありませんが、window.open() を使用できます。
構文は次のとおりです:
oNewWindow = window.open([sURL] [, sName] [, sFeature] [, bReplace])
Firefox では window.open のパラメータの中にあるだけです。 , sFeature にはさらにいくつかの機能設定があります。開いているウィンドウを FireFox の IE の showModalDialog と同じにしたい場合は、sFeature に modal=yes を追加するだけです。
その使用法を説明するために、以下に例を使用します。
機能説明: 子ウィンドウから色の種類を入力して親ウィンドウに送信し、ドロップダウン リストにオプションを追加します。
a.html

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






< title>a .html ドキュメント
/head>

name= "txtselect" id="txtselect">








b.html



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





b.html文档
<スクリプト言語="javascript">
関数 ClickOk()
{
var t=document.Edit;
var url=t.color.value;
if(url==null||url=="充填写颜色") return(false);
window.returnValue=url;
window.close();
}









>互換IEとFireFoxrに変更された代案は次のとおりです:
[code]




a.html文档






関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
color:
color:


>



以下は友人がインターネット上に投稿したテストコードです。

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






メイン ページ</ title> <br><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <br><script type="text/javascript"><!-- <br/>//配列<br/>関数 check(){ <br/>var mxh1 = new Array("mxh","net_lover","孟子 Chapter E") <br/>window.showModalDialog("test.html",mxh1,"unadorned:0;scroll:0;status:false;dialogWidth:380px; DialogHeight: 200px"); <br/>} <br/>//オブジェクトの転送<br/>function check1(){ <br/>var obj = new Object(); <br/>obj.name="zhangsan"; <br/> obj.age=2; <br/>obj.sex="男性"; <br/>window.showModalDialog("aaa.html",obj,"unadorned:0;scroll:0;status:false;dialogWidth:380px;dialogHeight :200px "); <br/>} <br/>// --></script> <br><body onload="check1();"> <br></body> <br> < /html> <br></p> <p><br>test.html ソース コード: <br></p> <p class="codetitle"><span style="text-decoration:underline;"> コードをコピーします。</span></p> <p class="codebody"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content= "text/html; charset=gb2312" /> <br><title><br><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> スクリプト タイプ="text/javascript" ><!-- <br/> //配列メソッドを渡す<br/> ; <br/> //alert(test[2]) <br/> //オブジェクトを渡すメソッド<br/>; obj = ダイアログ引数; <br/> アラート(obj.age); <br/><br/> <br/>// > ;/script> <br> <input type="text" /> <br></body> <br><br><br><br>showModalDialog fresh<br>showModalDialogの使用例では、親ウィンドウが子ウィンドウに値を渡し、子ウィンドウが親ウィンドウの値を設定し、子ウィンドウが閉じられるとその値が親ウィンドウに返されます。 farther.html <br><br><br><br>コードをコピー</p> コードは次のとおりです:<p></p> <p class="codebody"><br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <br/><HTML> <br/><頭> <br/><TITLE>新しいドキュメント




<スクリプト言語="javascript">







父窗口の值:

返される値:

子窗口設置の値: