window.open()命令の中のwidth=とheight=のピクセル数を指定することで開くサブウインドウの大きさを指定できます。100*300と400*150の2つのfunctionと、widthとhightのパラメーターをonClick時に渡すことで開く大きさを可変できるfunctionをサンプルにしました。
応用 : 詳しくはwindow.openの参照をご覧ください。
参照 : function, 変数, window.open, document.write(), document.close(), onClick,
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
//1.のサブウインドウ
function winOpen0(){
var win100=window.open('','win10_0','scrollbars=1,width=100,height=300');
win100.document.write('<font size=5 face="Osaka,ＭＳ Ｐゴシック">width=100とheight=300です(^^)</font>');
win100.document.close();
}
//2.のサブウインドウ
function winOpen1(){
var win101=window.open('','win10_1','scrollbars=1,width=400,height=150');
win101.document.write('<font size=5 face="Osaka,ＭＳ Ｐゴシック">width=400とheight=150です(^^)</font>');
win101.document.close();
}
//3.と4.のサブウインドウ
function winOpen2(W,H){
var win10=window.open('',(W+'')+(H+''),'scrollbars=1,width='+W+',height='+H+'');
win10.document.write('<font size=1">widthとheightのサイズはたとえば、onClick="winOpen('+W+','+H+')"という風に指定しています(^^)</font>');
win10.document.close();
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value=" 1. width=100 height=300 "
onClick="winOpen0()">
<input type="button" value=" 2. width=400 height=150 "
onClick="winOpen1()">
<input type="button" value=" 3. width=100 height=100 "
onClick="winOpen2(100,100)">
<input type="button" value=" 4. width=300 height=300 "
onClick="winOpen2(300,300)">
</form>
</body>
</html>
window.openに関する説明はwindow.openをご覧くださいwidth=横幅をピクセル単位で指定します
height=100高さをピクセル単位で指定します
指定できる横幅と高さはそれぞれ100ピクセル以上です。(W+'')+(H+'')の部分はwidth,heightの値をつなげてウインドウの名前を作成しています。この名前はターゲット名に相当しますWinD10.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、
その次のWinD10.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します
function winOpen2(W,H){命令}としておいて onClick="winOpen2(300,300)"をクリックするとW=300,H=300が関数winOpen2()のなかに書かれたWとHに引き渡されます。ここでは、たとえば、width='+W+',height='+H+'と書かれた部分がwidth=300,height=300に置き換わって命令が実行されます
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)