サブウィンドウのリサイズ

更新日:2019.03.19
  1. HOME
  2. JavaScript入門
  3. サブウィンドウのリサイズ

これまでのところでは、サブウィンドウを「開く段階」でウィンドウサイズを指定していました。 このページでは、サブウィンドウを「開いた後」にリサイズする方法について考えます。

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

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

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()を使って元のサイズに戻るようにしています。

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

楽天booksのJavaScript解説本