サブウィンドウのリサイズJavaScript入門

ウィンドウをリサイズする方法

ウィンドウサイズを変更するには、以下の命令文を使います。

resizeBy(横の変更幅,縦の変更幅)

ウィンドウを指定した数値分伸縮させます

resizeTo(横のサイズ,縦のサイズ)

ウィンドウを指定サイズに変更します

ウィンドウを指定サイズにリサイズします。相対指定の場合はresizeBy()を、絶対指定（指定サイズ）の場合はresizeTo()を使います。前頁のmoveBy(),moveTo()の時と同じく、「B」と「T」が大文字なので気を付けて下さい。

ウィンドウをリサイズするサンプル

別ウィンドウを開く

まずは320×240pxの別ウィンドウを開き、そのウィンドウのサイズを変更していきます。

<script>
function winOpen()
{
  window.open("winresize.html","subwin",
                         "width=320,height=240,left=0,top=0");
}
</script>

<a href="javascript:winOpen()">サンプル</a>

リサイズさせるページ

続いて別窓で開くページを作成します。winresize.htmlに以下のように記述します。

<button onclick="resizeBy(10,0)">横伸</button>
<button onclick="resizeBy(0,10)">縦伸</button>
<button onclick="resizeBy(-10,0)">横縮</button>
<button onclick="resizeBy(0,-10)">縦縮</button>

<button onclick="resizeTo(320,240)">指定サイズ</button>

サンプル

resizeBy()を使って10pxずつウィンドウを伸び縮みさせています。またresizeTo()を使って元のサイズに戻るようにしています。

このように、サイズ指定した別ウィンドウをリサイズすることは可能ですが、元のウィンドウは変更できないようになっています。