Search

ウィンドウの位置移動・ウィンドウサイズ変更(絶対指定)

unknown

window.moveTo ( 左上端のX座標, 左上端のY座標 )
window.resizeTo ( ウィンドウの幅, ウィンドウの高さ )
 メソッド説明
絶対指定 moveTo ウィンドウの位置を画面左上端を基準に、指定した位置に移動
resizeTo ウィンドウサイズを指定したサイズに変更

オブッジェクト名 window 省略可。

サンプルを見る
<script type="text/javascript">
    /* ウィンドウの位置移動&ウィンドウサイズ変更(絶対指定)*/
    var win;
    function windowOpen(){
        win=window.open("","win","top=0,width=100,height=100,left=0,location=1,status=1");
    }
    function windowMove(){
        if(!win || win.closed){
            alert("ウィンドウを開いてから押してください");
            return false;
        }
        win.moveTo(200, 100);
        win.focus();
    }
    function windowResize(){
        if(!win || win.closed){
            alert("ウィンドウを開いてから押してください");
            return false;
        }
        win.resizeTo(300, 300);
        win.focus();
    }
</script>

<p><a href="javascript:windowOpen();">ウィンドウを開く</a></p>
<p><a href="javascript:windowMove();">開いたウィンドウの位置移動(絶対指定)</a></p>
<p><a href="javascript:windowResize();">開いたウィンドウのウィンドウサイズ変更(絶対指定)</a></p>

ウィンドウの位置移動・ウィンドウサイズ変更(相対指定)

unknown

window.moveBy ( X方向の移動量, Y方向の移動量 )
window.resizeBy ( X方向の変更量, Y方向の変更量 )
 メソッド説明
相対指定 moveBy 現在のウィンドウの位置を基準に、指定した位置に移動
resizeBy 現在のウィンドウサイズに指定した幅・高さを追加したサイズに変更
ウィンドウサイズを小さくする場合は、負の値を指定

オブッジェクト名 window 省略可。

サンプルを見る
<script type="text/javascript">
    /* ウィンドウの位置移動&ウィンドウサイズ変更(相対指定)*/
    var win;
    function windowOpen(){
        win=window.open("","win","top=0,width=100,height=100,left=0,location=1,status=1");
    }
    function windowMove(){
        if(!win || win.closed){
            alert("ウィンドウを開いてから押してください");
            return false;
        }
        win.moveBy(200, 100);
        win.focus();
    }
    function windowResize(){
        if(!win || win.closed){
            alert("ウィンドウを開いてから押してください");
            return false;
        }
        win.resizeBy(300, 300);
        win.focus();
    }
</script>

<p><a href="javascript:windowOpen();">ウィンドウを開く</a></p>
<p><a href="javascript:windowMove();">開いたウィンドウの位置移動(相対指定)</a></p>
<p><a href="javascript:windowResize();">開いたウィンドウのウィンドウサイズ変更(相対指定)</a></p>

ウィンドウサイズを固定
ウィンドウの位置・サイズが変更された時のイベントを取得

unknown

window.onresize=処理 / window.onmove=処理
window.onload=処理 / window.onunload=処理
イベント説明
onresizeウィンドウサイズが変更された時
onmoveウィンドウが移動された時
onloadウィンドウの読み込みが完了した時
onunloadウィンドウが切り替えられた時

オブッジェクト名 window 省略可。

サンプルを見る
<script type="text/javascript">
    /**
     * ウィンドウサイズを固定
     * (ウィンドウの位置やサイズが変更されるのを防ぐ)
     * ウィンドウを移動しても、ウィンドウを再読込(更新)すると固定位置に戻ります
    */
    var win;
    function windowCore(){
        if(!win || win.closed){
            win=window.open("","win","top=0,width=100,height=100,left=0,location=1,status=1");
            win.document.write("ウィンドウサイズを変更しても固定されます");
        }
        /* ウィンドウを絶対位置に移動 */
        win.moveTo(0, 0);
        /* ウィンドウサイズを絶対サイズに変更 */
        win.resizeTo(500, 400);
        win.focus();
        win.onload=windowCore;
        win.onresize=windowCore;
    }
    /* ウィンドウの読み込みが完了した時(ウィンドウがリロードされた時も) */
    /* ウィンドウサイズが変更された時 */
</script>

<p><a href="javascript:windowCore();">ウィンドウサイズを開く</a></p>

モニタの有効領域とモニタサイズを取得

unknown

screen.availHeight / screen.availWidth
screen.height / screen.width

screenオブジェクトは、windowオブジェクトのプロパティです。
モニタ(パソコンの画面)のサイズ情報を取得するのに使用します。

「モニタの有効領域」とは、パソコンの画面全体からタスクバーなどを除いた部分のことです。

プロパティ説明
availWidthプロパティモニタの有効領域のサイズの幅
availHeighモニタの有効領域のサイズの高さ

「モニタサイズ」とは、パソコンの画面全体のことです。

プロパティ説明
widthプロパティモニタのサイズの幅
heightモニタサイズの高さ

オブッジェクト名 window 省略可。

<script type="text/javascript">
    /* モニタの有効領域とモニタサイズを取得 */
    function getScreenSize(){
        var awidth=screen.availWidth;
        var aheight=screen.availHeight;
        var width=screen.width;
        var height=screen.height;
        var s="";
        s+="有効領域の幅 = "+awidth+"\n";
        s+="有効領域の高さ = "+aheight+"\n";
        s+="モニタの幅 = "+width+"\n";
        s+="モニタの高さ ="+height+"\n";
        alert(s);
    }
</script>

<p><a href="javascript:getScreenSize();">モニタの有効領域とモニタサイズを取得</a></p>

モニタの有効領域とモニタサイズを取得

モニタの1/2サイズのウィンドウを画面中央に開く
screenオブジェクト使用

unknown

<script type="text/javascript">
    /* [注] IE、Netscapeでは動作しますが、Firefoxでは動作しません */

    /* モニタの1/2サイズのウィンドウを画面中央に開く */
    var win;
    function winOpenScreenCenter(){
        var ofst=2;
        var width=screen.availWidth / ofst;
        var height=screen.availHeight / ofst;
        if(!win || win.closed){
            win = window.open("/content/demo/sample.html","exp","width="+width+",height="+height+"");
        }
        win.moveTo(0,0)
        win.moveTo(width/2, height/2);
        win.focus();
    }
</script>

<p><a href="javascript:winOpenScreenCenter();">モニタの1/2サイズのウィドウを画面中央に開く</a></p>

モニタの1/2サイズのウィドウを画面中央に開く

ウィンドウサイズを取得
※Firefox、Netscapeのみ

unknown

ウィンドウの幅(px) = window.outerWidth
ウィンドウの高さ(px) = window.outerHeight
Firefox、Netscape

outerWidthプロパティは、ウィンドウの幅を取得します。
outerHeightプロパティは、ウィンドウの高さを取得します。

サンプルを見る
<!-- ※Firefox, Netscape のみ -->
<script type="text/javascript">
    document.write("ウィドウの幅:<em>"+window.outerWidth+"px<\/em><br \/>");
    document.write("ウィンドウの高さ:<em>"+window.outerHeight+"px<\/em><br \/>");
</script>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women