Windowオブジェクトウィンドウの位置移動／ウィンドウサイズ・モニタサイズ取得
- ウィンドウの位置移動・ウィンドウサイズ変更（絶対指定）
- ウィンドウの位置移動・ウィンドウサイズ変更（相対指定）
- ウィンドウサイズを固定〔ウィンドウの位置・サイズが変更された時のイベントを取得〕
- モニタの有効領域とモニタサイズを取得
- モニタの1/2サイズのウィンドウを画面中央に開く〔screenオブジェクト使用〕
- ウィンドウサイズを取得〔※Firefox、Netscapeのみ〕
ウィンドウの位置移動・ウィンドウサイズ変更（絶対指定）
unknown
window.moveTo ( 左上端のX座標, 左上端のY座標 )
window.resizeTo ( ウィンドウの幅, ウィンドウの高さ )
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方向の変更量 )
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=処理
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.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>
ウィンドウサイズを取得
※Firefox、Netscapeのみ
unknown
ウィンドウの幅(px) = window.outerWidth
ウィンドウの高さ(px) = window.outerHeight
ウィンドウの高さ(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>