小さなウィンドウからメインのウインドウを操作してみよう
表示の例
 ボタンを押すと小さなウインドウが開きます。
そのウインドウから、このページの背景の色をかえたりすることができます。
プログラムAのソースをコピーして、ボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function OpenWindow(){
myWin=window.open("","","width=400,height=280,left=50,top=50");
myWin.document.write("<HTML><HEAD><TITLE>リモートウインドウ</TITLE></HEAD><BODY bgcolor='#F0F8FF'>");
myWin.document.write("<CENTER><FONT style='font-size:16px; color:#666666'>メインウィンドウの背景色がかわります");
myWin.document.write("<BR><BR><HR><FORM>");
myWin.document.write("<INPUT type='button' value=' 赤 ' onClick=opener.document.bgColor='#FF0000'>");
myWin.document.write("<INPUT type='button' value=' 黄 ' onClick=opener.document.bgColor='#FFFF00'>");
myWin.document.write("<INPUT type='button' value=' 青 ' onClick=opener.document.bgColor='#0000FF'>");
myWin.document.write("<INPUT type='button' value='最初の色' onClick=opener.document.bgColor='#F0F8FF'>");
myWin.document.write("<BR><BR><INPUT type='button' value='TOPページへGO!' onClick=opener.location.href='java_top.html'>");
myWin.document.write("<BR><BR><HR><BR><BR><INPUT type='button' value='CLOSE' onClick='window.close()'>");
myWin.document.write("</FORM>");
myWin.document.write("</FONT></CENTER></BODY></HTML>");
myWin.document.close();
}
//-->
</SCRIPT>
<FORM><INPUT type="button" value="リモートウインドウ" onClick="OpenWindow()"></FORM>
プログラムAのソースの中に、小さなウインドウのHTMLソースを書き込んであります。基本的なタグを使ってコメントや罫線・ボタンを表示させています。こちらはあなたの知っているタグで、お好きな内容にかえてみてください。
小さなウインドウのサイズは4行目の width=400,height=280, のところで、よこのサイズなら 400 を、たてのサイズなら 280 をかえてください。
そのうしろの left=50,top=50 は小さなウインドウが表示される位置を指定しているところです。画面の左端からの距離は left=50 、いちばん上からの距離は top=50 で指定します。あなたの表示させたい位置の数字にかえてみてください。
5行目からはタグを使って書き込んであります。<TITLE>リモートウインドウ</TITLE> には小さなウインドウのタイトルバーに表示されるタイトル名を書きます。
背景の色は <BODY bgcolor='#F0F8FF'> の #F0F8FF をお好きな色にかえてください。
文字の大きさや色をかえる場合は、style='font-size:16px; color:#666666' のところで指定をします。大きさは font-size:16px; の 16 を好きな大きさにかえます。色は color:#666666 の #666666 を好きな色にかえてください。
7行目は罫線 <HR> を表示させてフォームが始まるところです。普通とちがうのは opener というプロパティを使っていることです。
この opener とは、このページのことになります。このページの背景色をかえたり、このページのリンク先を指定しています。
背景色の指定をしているのは、opener.document.bgColor='#FF0000' の #FF0000 などで、リンク先の指定は、opener.location.href='java_top.html' の java_top.html です。ここをあなたの好きな色やリンク先のアドレスにかえてください。
最後の行は リモートウインドウ というボタンのところですから、あなたの表示させたい文字にかえてくださいね。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
リンクをしたりウインドウをとじる場合に、ボタンではなくテキストで表示させたい場合は、プログラムAのそれぞれの部分を、下のようなソースにかえてください。
↓リンクの場合↓
myWin.document.write("<a href='JavaScript:void(0)' onClick=opener.location.href='java_top.html'>トップページへ</a>");
↓ウインドウをとじる場合↓
myWin.document.write("<a href='JavaScript:window.close()'>CLOSE</a>");
5・6年生にもわかるやさしいJavaScriptのTOPへ