S-JIS[2004-02-08/2007-08-12] 変更履歴
ここに書いているのは、新しいHTMLを{普通に/モードレスダイアログ[/2007-08-12]で/モーダルダイアログで}開く方法
。
単純なメッセージ表示や文字の入力は別の命令を使う。
HTML:
<A HREF="dialog_target.html">普通に移動</A> <INPUT TYPE="button" VALUE="スクリプトで移動" onClick="window.location='dialog_target.html'"> <!-- location.href ='dialog_target.html'でも可 -->
サンプル:普通に移動
新しいウィンドウを開いて(ポップアップ)、そこにHTMLを表示させる方法。
モードレス(modeless)というのはモーダルの反対で、そのウィンドウを開いている間も他のウィンドウをいじることが出来る。
HTML:
<SCRIPT language="JavaScript">
function popup_modeless(url){
var newWin = window.open(
url, //移動先
"pop", //ターゲット名(aタグのtargetと同様)
"width=800, height=480"
);
newWin.focus();
}
</SCRIPT>
<INPUT TYPE="button" VALUE="モードレス" onClick="popup_modeless('dialog_target.html')">
ダイアログ側で「opener」を使うことにより、開いた元のウィンドウにアクセスできる。
普通にwindow.open()でURLを指定すると、メソッドはGETになる。[2007-08-12]
これをPOSTにするには(POSTにしないとフォームのinputの値が渡せない)、ダミー(空っぽ)のウィンドウを先に開いてPOSTした結果を受け取るようにする。window.open()に指定するターゲット名とformタグに指定するターゲット名を同一にすることで
これが実現できる。(ウィンドウサイズ等を指定する必要がないなら、window.open()を使わずにformタグだけで出来るだろう)
HTML:
<script language="JavaScript"> function popup_post(url){ var newWin = window.open( "about:blank", //ダミーの移動先 "pop", //ターゲット名(formタグのtargetと同じ値にする) "width=800, height=480" ); var f = document.FORM_NAME; //フォームオブジェクト取得 f.action = url; //移動先 f.submit(); newWin.focus(); } </script> <form name="FORM_NAME" method="POST" target="pop"> …window.open()のターゲット名と同じ値にする 〜 </form>
参考: @IT会議室のwindow.openでPOSTするには?
新しいウィンドウを開いて(ポップアップ)、そこにHTMLを表示させる方法。
モーダル(modal)というのはモードレスの反対で、そのウィンドウを開いている間は他のウィンドウを操作できない。
(モーダルダイアログを開いたウィンドウだけが操作できない場合はウィンドウモーダル、他のウィンドウ全てが操作できなくなる場合はシステムモーダルと呼ぶような気がしたが、JavaScriptではウィンドウモーダルとなる)
HTML:
<SCRIPT language="JavaScript">
function popup_modal(url){
window.showModalDialog(
url, //移動先
this, //ダイアログに渡すパラメータ(この例では、自分自身のwindowオブジェクト)
"dialogWidth=800px; dialogHeight=480px;"
);
//モーダルダイアログが終了すると、ここからスクリプトが続行される
}
</SCRIPT>
<INPUT TYPE="button" VALUE="モーダル" onClick="popup_modal('dialog_target.html')">
パラメータ名 | 取りうる値 | 説明 |
---|---|---|
dialogWidth | 数値。単位必須 | ダイアログの横幅 |
dialogHeight | 数値。単位必須 | ダイアログの縦幅 |
dialogLeft | 数値。単位必須 | ダイアログのX座標 |
dialogTop | 数値。単位必須 | ダイアログのY座標 |
center | 真偽値 | ダイアログを画面の中央にするかどうか。dialogLeft,dialogTopが指定されていると、無効 |
status | 真偽値 | ダイアログのステータスバーを出すかどうか |
scroll | 真偽値 | (内容がダイアログのサイズより大きい場合に)スクロールバーを出すかどうか |
resizable | 真偽値 | ダイアログのサイズを変更できるかどうか |
help | 真偽値 | ダイアログ上部のバーの右端のヘルプボタン「?」を出すかどうか |
minimize | 真偽値 | ダイアログ上部のバーの右端の最小化ボタン「_」を出すかどうか |
maximize | 真偽値 | ダイアログ上部のバーの右端の最大化ボタン「□」を出すかどうか |
border | thin | ? |
unadorned | 真偽値 | ? |
edge | raised,sunken | ? |
dialogHide | 真偽値 | ? |
font | 数値 | ? |
※真偽値は、0,1, yes,no ,on,off のいずれか |
ダイアログを開く際の引数として自分のwindowオブジェクトを渡すことにより、ダイアログ側で「window.dialogArguments」を使うことで“開いた元のウィンドウ”にアクセスできる。
<script language="JavaScript"> function modal_end(){ var opener=window.dialogArguments; var opener_form=opener.document.forms(0); //元画面のフォーム //名前が「input_text」という元画面のオブジェクトに値をセット opener_form["input_text"].value="hoge"; opener_form.input_text.value="hoge"; //元画面の「test()」というjavascriptの関数を呼び出す opener.test(); //モーダルダイアログの終了 window.close(); //終了すると、呼び出し元のshowModalDialog()の直後へ制御が戻る。 } </script> <input type="button" value="終了" onClick="modal_end()">
ちなみに、「window.close()」は「window.opener」に値がセットされているとそのままウィンドウを閉じるが、
セットされていないと「ウインドウは、表示中のWebページにより閉じられようとしています。」という確認ダイアログがいちいち表示されて面倒。
(モーダルダイアログの中のwindow.close()はwindow.openerに値がセットされている状態みたい…値をセットするのには使えないのに)
なにか適当なものをwindow.openerにセットしてやれば、この確認ダイアログは出なくなる。
window.opener=self; window.close();