新しく開いたウィンドウの位置・サイズをJavaScriptで更新する

前回のつづきです。

新しく開くウィンドウの位置・サイズをJavaScriptで指定する - みかづきブログその3

window.openの返り値のmoveToメソッド、resizeToメソッドでウィンドウの位置・サイズを更新することができます。

var win = window.open("http://jsrun.it/kimmy/xn9B", "new", "top=0;left=0;width=300;height=300");

win.resizeTo(400, 600); // 幅・高さ
win.moveTo(100, 200); // X座標・Y座標

という感じです。

DEMOではわかりやすいようにウィンドウの位置をアニメーションさせています。

DEMO

※ PCでご観覧ください

JavaScript

(function(win, doc, $) {

    "use strict";
    
    var sub,
        $model = $({
            top: 0,
            left: 0,
            width: 300,
            height: 300
        });
    
    $("#btn").on("click", function() {
        sub = win.open("http://jsrun.it/kimmy/xn9B/", sub, "top=" + $model[0].top + ",left=" + $model[0].left + ",width=" + $model[0].width + ",height=" + $model[0].height);
   
        $model.animate({
            top: 2000,
            left: 2000
        }, 2000).animate({
            top: 0,
            left: 0
        }, 2000);
        
        setInterval(function() {
            sub.moveTo($model[0].top, $model[0].left);
        }, 50);
    });
    
})(this, document, $);

resizeToでウィンドウサイズもアニメーションさせようと思ったのですが、あんまりきれいに動かなかったので今回は見送りました。