第50回 「サブウィンドウに文字列を書き出す」
今回はサブウィンドウに文字を書き出す方法について説明します。
サブウィンドウに文字列を書き出す場合にもウィンドウを制御する時と同様にサブウィンドウへの参照を変数に入れておきます。
mySubWin = window.open("sub.html","sub","width=320,height=240");
ここまでは前回と同じです。以前に文字列を表示する／書き出す命令として
document.write("文字列")
を使ったのを覚えているでしょうか。サブウィンドウに文字列を書き出す場合にも同じdocument.writeを使います。ただし、前回同様に先頭に書き出すサブウィンドウを明示的に指定します。例えばABCという文字をサブウィンドウmySubWinに書き出すには以下のようにします。
mySubWin.document.write("ABC");
これでサブウィンドウに文字列ABCが表示されます。
これで終わりたい所ですが、書き出す前と後に「これからデータを書き出す」「書き出したデータが終了した」事を示す必要があります。
まず、「これからデータを書き出す」場合には以下のようにします。
mySubWin.document.open();
open()はデータストリームを開くという意味です。()の中には引数を指定することができます。この引数はMIME Typeになります。省略した場合にはtext/htmlになります。ここで分からなくても構いません。
openがあればcloseがあるという事で「書き出したデータが終了した」事を示すには以下のようにします。
mySubWin.document.close();
ここではサブウィンドウへの参照にmySubWinという変数を使っていますが、この名前はサブウィンドウを開く際に指定したものなので、必要に応じて書き換える必要があります。
以下がサブウィンドウに文字列を書き出すプログラムです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
mySubWin = window.open("sub.html","sub","width=320,height=240");
}
function wrt()
{
mySubWin.document.open();
mySubWin.document.write("Sample Text");
mySubWin.document.close();
}
// --></script>
</head>
<body>
<a href="javascript:subWin()">サブウィンドウを開く</a><br>
<a href="javascript:wrt()">文字列を書き出す</a><br>
</body>
</html>
単純な文字列だけでなくHTMLのタグも含めて書き出す事ができるため大変便利です。この場合は以下のようになります。通常の文字列に含ませて書き出すだけです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
mySubWin = window.open("sub.html","sub","width=320,height=240");
}
function wrt()
{
mySubWin.document.open();
mySubWin.document.write("<b>Sample</b> <font color='red'>Text</font>");
mySubWin.document.close();
}
// --></script>
</head>
<body>
<a href="javascript:subWin()">サブウィンドウを開く</a><br>
<a href="javascript:wrt()">文字列を書き出す</a><br>
</body>
</html>
サブウィンドウは用途によっては便利ですが不便な場合もあります。特に確認事項やパスワード入力では常にサブウィンドウが手前にあった方が便利です。間違って親ウィンドウに切り替わってユーザーによって予期せぬ事態が発生してしまう事もあります。（例えばサブウィンドウが開かれているはずが閉じられてしまったなど）
このような場合に備えてInternet Explorerのみですが「モーダルダイアログ*1」が用意されています。次回は、このモーダルダイアログについて説明します。
*1 showModalDialogとshowModelessDialogの２種類が用意されています。