ボタンで別のウインドウを表示させよう
表示の例
 ボタンを押すと、別のウインドウが開きます。
(例では色の見本のページです)
プログラムAのソースをコピーして、別のウインドウを表示させたいページ(ボタンをつけるページ)のHTMLソースのHEAD区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function open_win(){
window.open("java_colortest2.html","","menubar=yes,toolbar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes");
}
//-->
</SCRIPT>
プログラムAのソースの上から4行目の java_colortest2.html が別のウインドウに表示されるページのアドレス(ファイル名)ですから、あなたの表示させたいページのアドレスにかえてください。
表示されるウインドウの状態は、menubar=yes,toolbar=yes, などのところで設定ができます。それぞれを yes か no で指定し、表示するかしないかなどの細かい設定をします。
menubar メニューバー
toolbar ツールバー
location アドレスバー
status ステータスバー
scrollbars スクロールバー
resizable サイズ変更
さらにウインドウの大きさや位置を設定する事ができます。プログラムAのソースの上から4行目がウインドウの状態を設定しているところですが、そこに同じように大きさなどを設定します。すると下のような感じになります。
window.open("java_colortest2.html","","scrollbars=yes,resizable=yes,width=600,height=400,left=200,top=100");
この例の場合は、スクロールバーの表示・サイズ変更可能・ウインドウの横幅600ピクセル・縦幅400ピクセル・画面の左端からの距離200ピクセル・画面の上端からの距離100ピクセル、というような状態で表示されます。
プログラムBのソースをコピーして、ボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムBのソース
<FORM>
<INPUT type="button" value="♪色の見本を見る" onClick="open_win()">
</FORM>
2行目の value="♪色の見本を見る" の ♪色の見本を見る がボタンに表示される文字ですから、あなたの好きな文字にかえてくださいね。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
※ 動作確認について
ホームページ作成ソフトのプレビューなどでは、ウインドウが表示されるだけになり、プログラムAのソースで指定したページが表示されないようですから、必ずブラウザで動作確認をしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ