ウィンドウの大きさを変更する
windowオブジェクトがブラウザに関する操作を提供するクラスと言うことは前回お伝えしました。 この windowオブジェクトを操作する事により、ウィンドウ ( ブラウザの ) の大きさも自由に変更する事が出来ます。
絶対指定でウィンドウの大きさを変更する。 resizeTo
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function funcResizeTo(){
window.resizeTo(frmresizeTo.width.value,frmresizeTo.height.value);
}
//-->
</script>
<form name=frmresizeTo>
横：<input type=text name=width size=3 maxlength=4><br>
縦：<input type=text name=height size=3 maxlength=4><br>
<input type=button value=" ♂ " onclick="funcResizeTo()">
</form>
resizeToプロパティを設定することでウィンドウの大きさを変更します。第一引数にウィンドウの幅 ( width ) を指定して、第二引数にウィンドウの高さ ( height ) を指定します。
window.resizeTo(frmresizeTo.width.value,frmresizeTo.height.value);
相対指定でウィンドウの大きさを変更する。 resizeBy
「相対指定」聞きなれない人は「！？」と言う感じかも知れません。上で説明した絶対指定というのは「縦はどの位、横はどの位」とそのままサイズを指定しますが、この相対指定というのは 今現在の大きさからどの位と言う指定をします。つまり今のウィンドウから10ピクセル大きくする又は小さくすると言った指定をする訳です。
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function funcresizeBy(){
window.resizeBy(frmresizeBy.width.value,frmresizeBy.height.value);
}
//-->
</script>
<form name=frmresizeBy>
横：<input type=text name=width size=3 maxlength=4><br>
縦：<input type=text name=height size=3 maxlength=4><br>
<input type=button value=" ♂ " onclick="funcresizeBy()">
</form>
resizeByプロパティを設定することで現在の大きさからの相対指定でウィンドウの大きさを変更します。第一引数にウィンドウの増減幅を指定して、第二引数にウィンドウの増減する高さを指定します。幅に10を設定すると10ピクセル分幅が広がり、-10を指定すると10ピクセル分幅が狭まったと思います。
window.resizeBy(frmresizeBy.width.value,frmresizeBy.height.value);
ウィンドウのポジション ( 場所 ) を変更する
windowオブジェクトを操作する事により、ウィンドウ ( ブラウザ ) のポジション ( 場所 ) も自由に変更する事が出来ます。
絶対位置でウィンドウの位置を変更する。 moveTo
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function funcmoveTo(){
window.moveTo(frmmoveTo.x.value,frmmoveTo.y.value);
}
//-->
</script>
<form name=frmmoveTo>
横位置：<input type=text name=x size=3 maxlength=4><br>
縦位置：<input type=text name=y size=3 maxlength=4><br>
<input type=button value=" ♂ " onclick="funcmoveTo()">
</form>
moveToプロパティを設定することでウィンドウのポジション ( 場所 ) を変更します。第一引数にウィンドウのx座標を指定して、第二引数にウィンドウのy座標を指定します。この座標というのは画面上の座標の事で画面の一番左上は ( 0,0 ) という指定になります。
window.moveTo(frmmoveTo.x.value,frmmoveTo.y.value);
相対指定でウィンドウの位置を変更する。 moveBy
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function funcmoveBy(){
window.moveBy(frmmoveBy.x.value,frmmoveBy.y.value);
}
//-->
</script>
<form name=frmmoveBy>
横位置：<input type=text name=x size=3 maxlength=4><br>
縦位置：<input type=text name=y size=3 maxlength=4><br>
<input type=button value=" ♂ " onclick="funcmoveBy()">
</form>
moveByプロパティを設定することで現在の大きさからの相対指定でウィンドウの位置を変更します。 第一引数にウィンドウの横相対位置を指定して、第二引数にウィンドウの縦相対位置を指定します。二つとも10を指定した場合はウィンドウの位置が10ピクセル下、10ピクセル右に移動します。
window.moveBy(frmmoveBy.x.value,frmmoveBy.y.value);
新規のウィンドウを開く
今回はJavaScriptから新しいページを開く方法を見てみます。
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function func1(){
window.open("../index.htm");
}
//-->
</script>
<input type=button value=" ♂ " onclick="func1()">
新しいウィンドウを開くには windowオブジェクトの openメソッドを使用します。第一引数に開きたいページのの URLを指定します。後述しますがこのメソッドは戻り値として、メソッドで開いたウィンドウを表わす windowオブジェクトを返します。
window.open("../index.htm");
開いたウィンドウを操作する
前回はウィンドウを開くことまで説明しました。しかし開いたら開きっぱなしです、、、これでは余りにも単純過ぎますね、こんなことであれば JavaScriptを使わないで HTMLの標準機能だけで十分実現できます。 ただし今度説明する開いたウィンドウに対して操作すると言うことは HTMLでは実現できない部分になります。
[ sample ]
[ source ]
<script language="JavaScript">
<!--
var wObj
function func4_new(){
wObj = window.open("../index.htm");
}
function func4_move(){
wObj.moveTo(func4.x.value,func4.y.value);
}
//-->
</script>
<form name=func4>
<input type=button value="ウィンドウ作成" onclick="func4_new()"><br><br>
横位置：<input type=text name=x size=3 maxlength=4><br>
縦位置：<input type=text name=y size=3 maxlength=4><br>
<input type=button value="位置を移動する" onclick="func4_move()">
</form>
前回は単に openメソッドを呼び出しただけでしたが、今回はそのメソッドを呼び出した結果を変数 wObjで取得しています。 このメソッドの戻り値はオープンしたウィンドウオブジェクトを返します。この変数 wObj = window ということです。ただしここで注意して欲しいのはこのオブジェクトは操作しているこのページではなく新規でオープンした windowオブジェクトを指している所です。
wObj = window.open("../index.htm");
変数に対してプロパティを設定しています。これはこの変数が windowオブジェクトが代入しているから有効で、この操作によって window.moveTo=wObj.moveToと同じ結果になります。
wObj.moveTo(func4.x.value,func4.y.value);
|
home / Knave web lecture / JavaScript / 14章 JavaScriptのウィンドウ操作Ⅱ