JavaScriptでWindowを操作


あんまりjQueryとか関係なく普通のJavaScriptですが、仕事でウィンドウの操作する必要があり調査も兼ねて。

画面サイズを取得
ウィンドウ開く前に画面のサイズがわかってた方がイイよね。

1
2
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;

screen.width, screen.height でも問題ないけど、JavaScript でウィンドウ動かしたりするのでコチラで。

ウィンドウサイズの取得
ウィンドウのサイズを調べます。

1
2
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;

IEでは outerWidth, outerHeight が使えないので innerWidth, innerHeight を使う。さらにバージョンでも違うみたいなので、jQueryで取得しても良いかも。

1
2
var windowWidth = $(window).width();
var windowHeight = $(window).height();

ウィンドウサイズは環境やブラウザによって違うのであまりアテにならない。JavaScriptでは指定するだけにとどめた方が良いかも。

ウィンドウを開く
定番過ぎますが一応。

1
var popup = window.open(location, name, option);

あとで操作できるように、適当な変数に保持します。引数の説明は下記。
location: URLの指定
name: window名
option: 下記の項目を key=value,key=value,… とカンマ区切りで指定

  • width: 横幅(innerWidth)
  • height: 縦幅(innerHeight)
  • left: ウィンドウ左端の位置(X座標)
  • top: ウィンドウ上端の位置(Y座標)
  • location: ロケーションバーの有無(yes / no)
  • menubar: メニューバーの有無(yes / no}
  • toolbar: ツールバーの有無(yes / no)
  • scrollbars: スクロールバーの有無(yes / no)
  • status: ステータスバーの有無(yes / no)
  • resizable: サイズ変更の可否(yes / no)

オプション指定しても、その通りにならないこともまああるよね。

ウィンドウを閉じる
開いたので閉じます。保持してた変数で指定。

1
popup.close();

ウィンドウの移動
座標の指定と、差分の指定ができます。座標指定はウィンドウの左上です。

1
2
popup.moveTo(x, y); // 座標指定
popup.moveBy(dx, dy); // 差分の指定

あ、自分自身は window.moveTo で移動します。例は、ポップアップの移動です。

ウィンドウサイズの指定
ウィンドウのサイズを指定します。サイズはウィンドウの左上を基点に変更されます。

1
popup.resizeTo(width, height);

ウィンドウの拡大縮小みたいなイメージの動作にしたければ、resizeTo と moveTo を併用するとよいかも。ウィンドウの中心が指定座標になるように、ウィンドウサイズの半分だけ位置を調整するとか。

これだけあれば、ウィンドウ自体のアニメーションぽいことは出来そうかな。
サンプル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です