【おやじのweb技】 html/javascript/css等
TopPage表示 /  保 存 /  印 刷 /  Window Resize /  Window Close

k005

ウィンドウをオープンしたときウィンドウのサイズを変える

web工房  Copyright(C) 2004 web工房 All Rights Reserved 
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示

action


ウィンドウ(800W×700H)  /  ウィンドウ(600W×400H)
ウィンドウ(300W×200H)  /  ウィンドウ(フルスクリーン)

上記リンク文字をクリックするとこのウィンドウの大きさが変わります。
300W×200Hの場合はウィンドウの右下をドラックしてサイズを大きくして下さい。

web技

■本ファイルの例□リンク文字をクリックしてサイズ変更■

◆手順1【スクリプト】
※<head>〜</head>に記述します

-----次の行から(copy)-----
<script type="text/javascript">
<!--
function winResize(W,H) {
  window.moveTo(100,100) //ウィンドウの表示位置を決める
  window.resizeTo(W,H);
}
//-->
</script>
-----上の行まで(copy)-----

◆手順2【リンク文字からの実行】
※<body〜</body>に記述します
※ウィンドウの幅(W)と高さ(H)を指定してスクリプトを実行します

-----次の行から(copy)-----
<a href="javascript:winResize(800,700)">ウィンドウの大きさ(800W×700H)</a>
-----上の行まで(copy)-----

◆手順【フルスクリーンの場合のスクリプト】
※フルスクリーン(全画面)表示の場合は下記のようにします。
※IE5以上の限定技だと思いますが...

-----次の行から(copy)-----
window.moveTo(0,0) //ウィンドウ表示位置を(0,0)に戻す
window.resizeTo(window.screen.availWidth,window.screen.availHeight);
-----上の行まで(copy)-----


■起動時サイズ変更■ファイルを起動したときサイズを変更する

◆手順1【スクリプト】
※<head>〜</head>に記述します
※起動時に指定サイズにウィンドウを変更します
※ウィンドウサイズをピクセルで指定します

-----次の行から(copy)-----
<script type="text/javascript">
<!--
  window.resizeTo(800,700);
}
//-->
</script>
-----上の行まで(copy)-----

解説等

◆ウィンドウサイズ設定技の相違
※window.open()は、ウィンドウの大きさを指定して新しいウィンドウを開く
※window.resizeTo()はウィンドウを開いてからサイズを変える
◆フルスクリーンは正確には「全画面表示」ではありません。
※スクリーンサイズにウィンドウサイズを合わせたものですから、ウィンドウ右下をドラッグしてウィンドウサイズをマニュアル変更することができます。

【類似技】
[技k012]ウィンドウをフルスクリーンサイズにする
※検索サイトからこられるお客さまで「ウィンドウ フルスクリーン」というように直接この技を探しておられる方が多々おられるようなので、技ファイルとして独立させました。

keyword

◇window.resizeTo

実際例

本技ファイルのメニュー[Window Resize]で実際に使用している外部jsスクリプトの例です。
(外部スクリプト[win_resize.js]を[win_resize.txt]に複製してインラインフレームで表示)
特に解説しませんので、各自、中味を吟味してみて下さい(^^)

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----