JavaScript プログラミング講座


ウィンドウについて（Window）



・ウィンドウについて
・ウィンドウのプロパティについて
・ウィンドウを作成する
・ウィンドウを閉じる
・ウィンドウを取得する
・ウィンドウの移動について
・ウィンドウのサイズについて
・ウィンドウの奥行きについて
・ウィンドウのスクロールについて

前のページに戻る

　

ウィンドウについて

　


■ウィンドウについて

　
ウィンドウは、ブラウザのウィンドウを制御する機能がまとまっています。
　
■自身の Window オブジェクトを取得する
　
window 変数を使用します。
　
グローバルな変数です。
　
自身のウィンドウオブジェクトを取得する

// ウィンドウオブジェクトを取得する
var window_obj = window;

// 出力テスト
console.log(window_obj);
　

■グローバル空間と Window オブジェクトの関係について

　
自身の Window オブジェクトは、グローバル空間に相当します。
　
グローバル変数を用意した場合、Window オブジェクトのプロパティとしてもアクセス可能です。
　
グローバル変数は、Window オブジェクトのプロパティからもアクセスできる

<html>
  <body>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// グローバル変数を用意する
	// ------------------------------------------------------------
	var aaa = 123;
	var bbb = "あいう";

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	console.log(aaa);
	console.log(bbb);

	// ------------------------------------------------------------
	// 出力テスト（Window オブジェクトのプロパティからもアクセス可能）
	// ------------------------------------------------------------
	console.log(window.aaa);
	console.log(window.bbb);

    //-->
    </script>

  </body>
</html>
　
　

■window の表記は省略可能

　
window の表記は、省略することが可能です。
　
表記を省略したときに、定義されていない未知の変数にアクセスするとエラーが発生します。
　
window の表記は省略可能

<html>
  <body>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// Document オブジェクトを取得する
	// ------------------------------------------------------------
	var document_obj = window.document;

	// 出力テスト
	console.log(document_obj);

	// ------------------------------------------------------------
	// Document オブジェクトを取得する（window. の表記を省略できる）
	// ------------------------------------------------------------
	var document_obj = document;

	// 出力テスト
	console.log(document_obj);

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

ウィンドウのプロパティについて

　


■ウィンドウのプロパティ一覧

　
Window オブジェクトの、プロパティの一覧です。（一部抜粋）
　
■主要ブラウザで取得可能（標準化）
　
プロパティ名型説明
nameStringウィンドウの名前を設定する。
locationLocationロケーションオブジェクトを取得する。（読み取り専用）
historyHistoryヒストリーオブジェクトを取得する。（読み取り専用）
statusStringステータスバーの文字を設定する
　
プロパティ名型説明
selfWindow自身のウィンドウオブジェクトを取得する。（window と同等）（読み取り専用）
parentWindow親（１つ上）のウィンドウオブジェクトを取得する。（読み取り専用）
topWindow最上位のウィンドウオブジェクトを取得する。（読み取り専用）
　
プロパティ名型説明
framesWindowフレームリストを取得する。（読み取り専用）
lengthNumberフレームの総数を取得する。（読み取り専用）
frameElementElement自身がフレーム要素内で動作している場合、その親となる要素を取得する。
<FRAME> <IFRAME> 要素などが該当する。（読み取り専用）
　
プロパティ名型説明
openerWindow作成主となる Window オブジェクトを取得。open() メソッドを使用した場合などで取得可能。（読み取り専用）
closedBooleanウィンドウが閉じられたか調べる（読み取り専用）
　
■標準化予定（CSSOM View Module）
　
プロパティ名型説明
screenScreenスクリーンオブジェクト（読み取り専用）
screenXNumberウィンドウの水平方向の位置（スクリーン座標系）（読み取り専用）
screenYNumberウィンドウの垂直方向の位置（スクリーン座標系）（読み取り専用）
outerWidthNumberウィンドウの幅（読み取り専用）
outerHeightNumberウィンドウの高さ（読み取り専用）
innerWidthNumberウィンドウのビューポートの幅（スクロールバーを含む）（読み取り専用）
innerHeightNumberウィンドウのビューポートの高さ（スクロールバーを含む）（読み取り専用）
pageXOffsetNumberウィンドウの水平方向のスクロール位置（scrollX と同等）（読み取り専用）
pageYOffsetNumberウィンドウの垂直方向のスクロール位置（scrollY と同等）（読み取り専用）
scrollXNumberウィンドウの水平方向のスクロール位置（読み取り専用）
scrollYNumberウィンドウの垂直方向のスクロール位置（読み取り専用）
devicePixelRatioNumberブラウザの拡大縮小率を取得する。100% 表示で 1.0 が得られる。（読み取り専用）
　

上に戻る

　

ウィンドウを作成する

　
　
普通のウィンドウを作成する
モーダルダイアログウィンドウを作成する
　


■ウィンドウを作成する

　
open() メソッドを使用します。
　
新規にウィンドウが作られる場合、ポップアップブロックが発生する事があります。
　
回避するには、マウスやキーボードなどの押下操作中に実行します。
　
Window.open( "URL" , "ターゲット名" , "オプション" , 現在のセッション履歴を上書きするか？ ) :Window
第01引数 String表示したい URL アドレスを指定。空のウィンドウを作成する場合は、空文字 "" を指定。
第02引数(略可)Stringターゲット名を指定
第03引数(略可)Stringオプションを文字列で指定
第04引数(略可)Boolean現在のセッション履歴を上書きするか？
戻り値 Windowオープンに成功した場合、新しい Window オブジェクトが得られる。失敗すると null が得られる。
　
■第01引数（ URL を指定）
　
開きたい URL アドレスを指定します。
　
http://example.com を開く

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定して開く
	window.open( "http://example.com/" );

};
　
空のウィンドウを作成する場合は、空文字 "" を指定します。
　
空のウィンドウ作成後は、Document オブジェクトから、HTML 文書を出力して表示することができます。
　
DOM API を使って、空のウィンドウ内のコンテンツを動的に制御する事もできます。
　
DOM については、こちらで解説しています。
　
空のウィンドウを作成して、HTML 文書を出力する

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// 空のウィンドウを作成する
	var window_obj = window.open("");

	// 新しいウィンドウの Document オブジェクトを取得する
	var document_obj = window_obj.document;


	// ------------------------------------------------------------
	// 新しいウィンドウの Document オブジェクトに HTML 文書を出力する
	// ------------------------------------------------------------
	// ドキュメントを開く
	document_obj.open();

	// HTML 文書を出力
	document_obj.write("<html>");
	document_obj.write(" <body>");
	document_obj.write("  --- 出力テスト ---");
	document_obj.write(" </body>");
	document_obj.write("</html>");

	// ドキュメントを閉じる
	document_obj.close();


	// ------------------------------------------------------------
	// DOM API を使って制御する
	// ------------------------------------------------------------
	// テキストノードを作成する
	var text_node = document_obj.createTextNode("DOM 操作も可能です！！");

	// BODY のノードリストに登録
	document_obj.body.appendChild(text_node);

};
　
■第02引数（ターゲット名）
　
対象となるウィンドウ名を指定します。
　
存在するウィンドウ名を指定した場合、対象ウィンドウを更新します。
　
存在しないウィンドウ名を指定した場合、新しくページが開かれ、名前が割り当てられます。
　
名前以外に、以下の文字列を指定することもできます。
　
文字列 説明
"_self" 現在のウィンドウ
"_blank" 新規にウィンドウを開く
"_parent" 現在のウィンドウから１つ上（親）のウィンドウ
"_top" 現在のウィンドウの最上位（ルート）のウィンドウ
　
ページを遷移する

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定して、トップのウィンドウのページを遷移する
	var window_obj = window.open( "http://example.com/" , "_top" );

};
　
新しくページを開く

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定して新しくページを開く
	var window_obj = window.open( "http://example.com/" , "_blank" );

};
　
■第03引数（オプション）
　
第03引数で指定するオプションについては、こちらで解説しています。
　
■第04引数（現在のセッション履歴を上書きするか？）
　
第04引数は、一部のブラウザで動作します。
　
"_top" に相当するウィンドウのアドレスに変化があった場合、効果があります。
　
true を指定した場合、遷移後に元のページに戻ることはできません。
　
今まで開いていたページのセッション履歴（１回分）が、移動先のアドレスで上書きされ、消滅します。
　
現在のセッション履歴を上書きしつつ、ページを遷移する

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定して、トップのウィンドウのページを遷移する（現在のセッション履歴を上書き）
	var window_obj = window.open( "http://example.com/" , "_top" , "" , true );

};
　
■戻り値（Window オブジェクト）
　
戻り値から、新しい Window オブジェクトが得られます。
　
第02引数で指定した名前のウィンドウが既に存在する場合、その Window オブジェクトが得られます。
　
セキュリティについては、こちらで解説しています。
　

■window.open() メソッドの、第03引数で指定するオプションについて

　
"名前=値" と表記します。空白を含めることはできません。
　
複数のパラメータを指定したい場合は、カンマ "," で区切ります。
　
"名前=値,名前=値,名前=値"
　
■ウィンドウの位置やサイズに関するパラメータ
　
数値（単位:ピクセル）を指定します。
　
このパラメータを設定すると、ダイアログ風のウィンドウとして表示する事ができます。
　
名前 説明
left ウィンドウの水平位置（スクリーン座標系）
top ウィンドウの垂直位置（スクリーン座標系）
width ウィンドウのクライアント領域の幅
height ウィンドウのクライアント領域の高さ
　
■ウィンドウの表示に関するパラメータ
　
真偽値（yes , no , 1 , 0）を指定します。
　
すべてのブラウザで利用できるとは限りません。
　
名前 説明
menubar ブラウザのメニューバーの表示の有無を設定。
toolbar ブラウザのツールバーの表示の有無を設定。
location ブラウザのアドレスバーの表示の有無を設定。
status ブラウザのステータスバーの表示の有無を設定。
scrollbars ブラウザのスクロールバーの表示の有無を設定。
resizable ウィンドウのリサイズの有無を設定。
titlebar ブラウザのタイトルバーの表示の有無を設定。（IE5.5 以下などで動作）
directories ブラウザのディレクトリボタンの表示の有無を設定。（IE6 以下などで動作）
　
■表示モードに関するパラメータ（Internet Explorer 専用）
　
真偽値（yes , no , 1 , 0）を指定します。
　
Internet Explorer 専用です。
　
名前 説明
fullscreen フルスクリーンモードで表示します。
channelmode シアターモードで表示します。（IE6 以下などで動作）
　
■作成例
　
シンプルなダイアログ風のウィンドウを開く

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定してウィンドウを開く
	window.open( "http://example.com/" , "_blank" , "left=100,top=150,width=400,height=300" );

};
　
リッチなダイアログ風のウィンドウを開く

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定してウィンドウを開く
	window.open("http://example.com/" , "_blank" , "width=400,height=300,menubar=1,toolbar=1,location=1,status=1,resizable=1" );

};
　

■新しい Window オブジェクトのセキュリティについて

　
「ウィンドウ作成元の URL」と「開いた先の URL」の、生成元（オリジン）が一致する場合、新しいウィンドウの Document オブジェクトにアクセスする事ができます。
　
DOM API を使えば、新しいウィンドウ内のコンテンツを動的に制御することができます。
　
DOM については、こちらで解説しています。
　
開いたウィンドウ先のコンテンツを制御する（この例の場合、http://example.com/*** 内の何処かで実行した場合にのみアクセス可能）

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定してウィンドウを開き、新しいウィンドウオブジェクトを取得する
	var window_obj = window.open("http://example.com/");

	// ------------------------------------------------------------
	// 読み込みが完了した時に実行されるイベント
	// ------------------------------------------------------------
	window_obj.onload = function (){

		// 新しいウィンドウのドキュメントオブジェクトを取得する
		var document_obj = window_obj.document;

		// ドキュメント内のコンテンツを HTML 文字列として取得する
		console.log(document_obj.documentElement.innerHTML);


		// ------------------------------------------------------------
		// 新しいウィンドウのドキュメント内に、動的にエレメントを追加する
		// ------------------------------------------------------------
		// エレメントを作成する
		var element = document_obj.createElement("div");

		// スタイルを設定する
		element.style.cssText = "position:absolute; left:100px; top:100px; width:400px; height:400px; background:#fcc; border:10px #844 solid;";

		// BODY のノードリストに登録する
		document_obj.body.appendChild(element);
	};
};
　
空ウィンドウ内を制御する

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// 空のウィンドウを作成する
	var window_obj = window.open("");

	// 新しいウィンドウのドキュメントオブジェクトを取得する
	var document_obj = window_obj.document;

	// ------------------------------------------------------------
	// 動的にエレメントを追加する
	// ------------------------------------------------------------
	// エレメントを作成する
	var element = document_obj.createElement("div");

	// スタイルを設定する
	element.style.cssText = "position:absolute; left:100px; top:100px; width:400px; height:400px; background:#fcc; border:10px #844 solid;";

	// BODY のノードリストに登録する
	document_obj.body.appendChild(element);

};
　

上に戻る

　

ウィンドウを閉じる

　
ウィンドウを閉じる
ウィンドウが既に閉じられたか調べる
ページが消滅する瞬間に警告メッセージを表示する
ページが消滅する瞬間を監視する
　


■ウィンドウを閉じる

　
close() メソッドを使用します。
　
■セキュリティについて
　
ユーザーが開いたウィンドウを、制御することはできません。
　
スクリプトから動的に作成したウィンドウのみ、閉じることができます。
　
■使用例
　
新しくウィンドウを開いてから、ウィンドウを閉じる

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 新しくページを開いて、ウィンドウオブジェクトを取得する
		window_obj = window.open( "http://example.com/" , "_blank" );

	}else{
		// ウィンドウを閉じる
		window_obj.close();

		// 参照を断つ
		window_obj = null;
	}

};
　
自身のウィンドウを閉じる

// 作成主が存在する（存在しない場合は制御できない）
if(window.opener){

	// ウィンドウを閉じる
	window.close();

}
　

■ウィンドウが既に閉じられたか調べる

　
closed プロパティを使用します。
　
true であれば、ウィンドウは既に消滅しています。
　
■使用例
　
ウィンドウが閉じられたか調べる

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// 空のウィンドウを作成して、ウィンドウオブジェクトを取得する
	window_obj = window.open("","_blank","width:300,height:300");

};


// ------------------------------------------------------------
// 一定の時間隔で実行する
// ------------------------------------------------------------
setInterval(function (){
	if(window_obj){
		// ウィンドウが閉じられたか調べる
		var closed = window_obj.closed;

		// 出力テスト
		console.log("ウィンドウが閉じられたか:" + closed);
	}
},1000);
　

■ページが消滅する瞬間に警告メッセージを表示する

　
ページが消滅する直前に、警告ダイアログを表示できます。
　
これにより、ページの遷移阻止を試みる事ができます。
　
■現在のページが、アンロードされる直前であるかを監視する
　
onbeforeunload イベントを使用します。
　
Opera(Presto 版) では、対応していません。
　
登録したコールバック関数の引数から、BeforeUnloadEvent オブジェクトが得られます。
　
■ BeforeUnloadEvent オブジェクトについて
　
以下のプロパティがあります。
　
プロパティ名型説明
returnValueString警告メッセージを表示したい場合、警告用の文字列をセットする。
　
■非標準ブラウザの場合
　
ブラウザによっては、returnValue プロパティへの書き込みに対応していません。
　
かわりに、コールバック関数内から警告文を返す必要があります。
　
■使用例
　
ページが消滅する瞬間に警告を表示する

// ------------------------------------------------------------
// アンロードされる直前に実行される関数
// ------------------------------------------------------------
function WindowBeforeUnloadFunc(e){
	if(!e) e = window.event; // レガシー

	// 警告メッセージの文字
	var message = "これは、警告メッセージです。";

	// 警告メッセージを設定する
	e.returnValue = message;

	// 警告メッセージを設定する（非標準の方法）
	return message;
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(window.addEventListener){

	// アンロードされる直前に実行されるイベント
	window.addEventListener("beforeunload" , WindowBeforeUnloadFunc);

// アタッチイベントに対応している
}else if(window.attachEvent){

	// アンロードされる直前に実行されるイベント
	window.attachEvent("onbeforeunload" , WindowBeforeUnloadFunc);

// イベントハンドラを使用する
}else{

	// アンロードされる直前に実行されるイベント
	window.onbeforeunload = WindowBeforeUnloadFunc;

}
　
■キーボード操作によるリロードを無効化する
　
キーボード操作の無効化については、こちらで解説しています。
　

■ページが消滅する瞬間を監視する

　
■現在のページが、アンロードされる瞬間を監視する
　
onunload イベントを使用します。
　
主要なブラウザで動作します。
　
ページが消滅する瞬間に、何らかの情報を保存したいときに便利です。
　
自身のウィンドウの消滅を監視する場合、動作テストが少々面倒です。
　
JavaScript デバッガの、ブレークポイント機能を使用するといいでしょう。
　
■セキュリティについて
　
コールバック関数内では、API の呼び出しに制限があります。
　
例えば、ダイアログウィンドウを作成する事はできません。
　
■使用例
　
ページが消滅したか監視する

// ------------------------------------------------------------
// アンロードされたときに実行される関数
// ------------------------------------------------------------
function WindowUnloadFunc(e){

	// ブレークポイントを指定するステート
	debugger;
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(window.addEventListener){

	// アンロードされたときに実行されるイベント
	window.addEventListener("unload" , WindowUnloadFunc);

// アタッチイベントに対応している
}else if(window.attachEvent){

	// アンロードされたときに実行されるイベント
	window.attachEvent("onunload" , WindowUnloadFunc);

// イベントハンドラを使用する
}else{

	// アンロードされたときに実行されるイベント
	window.onunload = WindowUnloadFunc;

}
　

上に戻る

　

ウィンドウを取得する

　
任意の Window オブジェクトを取得する
親の Window オブジェクトを取得する
作成主の Window オブジェクトを取得する
ウィンドウを作成し Window オブジェクトを取得する
インラインフレーム内の Window オブジェクトを取得する
　


■任意の Window オブジェクトを取得する

　
■ウィンドウ名から Window オブジェクトを取得する
　
相手のウィンドウ名が判明している場合、open() メソッドを使って Window オブジェクトを取得する事ができます。
　
第01引数に、空文字 "" を指定します。
　
第02引数に、ウィンドウ名を指定します。
　
■該当ウィンドウが存在しない場合
　
存在しなかった場合、新規に空のウィンドウが作られてしまいます。
　
マウスやキーボード操作（離した時）以外であれば、通常はポップアップブロックされます。
　
ポップアップブロックが発生した場合、null や undefined 値が得られます。
　
Opera(Presto 版) では、必ず Window オブジェクトが得られるようです。
　
■取得例
　
"my_window" という名前の Window オブジェクトを取得する

<html>
  <body>

    <a href="http://example.com" target="my_window" >ウィンドウを開く</a><br>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 5 秒後に実行される関数
	// ------------------------------------------------------------
	setTimeout(function (e){

		// ------------------------------------------------------------
		// "my_window" という名前の Window オブジェクトを取得する（無ければ新規作成する）
		// ------------------------------------------------------------
		var window_obj = window.open( "" , "my_window");

		// 出力テスト
		console.log(window_obj);

	},1000 * 5);
    //-->
    </script>

  </body>
</html>
　
"my_iframe" という名前の Window オブジェクトを取得する

<html>
  <body>

    <iframe src="" name="my_iframe" ></iframe>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "my_iframe" という名前の Window オブジェクトを取得する
	// ------------------------------------------------------------
	var window_obj = window.open( "" , "my_iframe");

	// 出力テスト
	console.log(window_obj);

    //-->
    </script>

  </body>
</html>
　
■ウィンドウ名を設定する
　
window.name プロパティを使用します。
　
自身のウィンドウに "my_window" という名前を設定する

// ------------------------------------------------------------
// 自身のウィンドウに "my_window" という名前を設定する
// ------------------------------------------------------------
window.name = "my_window";

// ------------------------------------------------------------
// "my_window" という名前の Window オブジェクトを取得する
// ------------------------------------------------------------
var window_obj = window.open( "" , "my_window");

// 出力テスト
console.log(window_obj.name); // "my_window"
　

■親の Window オブジェクトを取得する

　
以下のプロパティを使用します。
　
プロパティ名型説明
selfWindow自身のウィンドウオブジェクトを取得する。（window と同等）（読み取り専用）
parentWindow親（１つ上）のウィンドウオブジェクトを取得する。（読み取り専用）
topWindow最上位のウィンドウオブジェクトを取得する。（読み取り専用）
　

■作成主の Window オブジェクトを取得する

　
window.opener プロパティを使用します。
　
open() メソッドを使用して、自身が外部から開かれた場合に取得できます。
　
それ以外の場合は、null や undefined 値が得られます。
　
作成主のウィンドウを取得して、閉じられたか調べる（作成された側）

// ------------------------------------------------------------
// 作成主のウィンドウオブジェクトを取得する
// ------------------------------------------------------------
var window_opener = window.opener;

// 出力テスト
alert(window_opener);

// ------------------------------------------------------------
// 作成主が存在する
// ------------------------------------------------------------
if(window_opener){

	// ------------------------------------------------------------
	// 一定の時間隔で実行する
	// ------------------------------------------------------------
	setInterval(function (){

		// 作成主が閉じられたか調べる
		var closed = window_opener.closed;

		// 出力テスト
		console.log("作成主は閉じられた:" + closed);

	},1000);
}
　

上に戻る

　

ウィンドウの移動について

　
ウィンドウの位置を取得する
ウィンドウの位置を変更する（絶対座標指定）
ウィンドウの位置を変更する（移動量指定）
　


■ウィンドウの位置を取得する

　
ウィンドウの位置を取得するには、以下のプロパティを使用します。
　
InternetExplorer 8 以前では、対応していません。
　
プロパティ名型説明
screenXNumberウィンドウの水平方向の位置（スクリーン座標系）（読み取り専用）
screenYNumberウィンドウの垂直方向の位置（スクリーン座標系）（読み取り専用）
　
■測定方法
　
このプロパティは、ウインドウの左上が基点となります。
　
　
■取得例
　
ウィンドウの位置を取得する

// ------------------------------------------------------------
// 一定の時間隔で実行する
// ------------------------------------------------------------
setInterval(function (){

	// ウィンドウの位置を取得する
	var screen_x = window.screenX;
	var screen_y = window.screenY;

	// 出力テスト
	console.log("x:" + screen_x);
	console.log("y:" + screen_y);

},1000);
　

■ウィンドウの位置を変更する（絶対座標指定）

　
moveTo() メソッドを使用します。
　
絶対座標（スクリーン座標系）を指定します。
　
Window.moveTo( x座標 , y座標 ) :Void
第01引数 Numberウィンドウの水平位置を指定（スクリーン座標系）
第02引数 Numberウィンドウの垂直位置を指定（スクリーン座標系）
戻り値 Voidなし。
　
■セキュリティについて
　
ユーザーが開いたウィンドウを、制御することはできません。
　
スクリプトから動的に作成したウィンドウのみ、移動することができます。
　
新しいタブが作られないように、ダイアログ風ウィンドウを作成するといいでしょう。
　
作成主から、開いた先のウィンドウを制御する場合、生成元（オリジン）が一致している必要があります。
　
「自身のウィンドウ」を制御する場合、「作成主」とオリジンが一致している必要はありません。
　
■使用例
　
クリックするたびにウィンドウをランダムに移動する（絶対座標指定）

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 空のダイアログ風ウィンドウを作成する
		window_obj = window.open("","_blank","width=300,height=300");

		// 新しいウィンドウの Document オブジェクトを取得する
		var document_obj = window_obj.document;

		// HTML 文書を出力
		document_obj.open();
		document_obj.write("<html><body>テスト</body></html>");
		document_obj.close();

	}else{

		// ランダムな位置
		var pos_x = Math.random() * screen.availWidth;
		var pos_y = Math.random() * screen.availHeight;

		// ウィンドウを移動する（絶対座標指定）
		window_obj.moveTo(pos_x,pos_y);

		// ウィンドウを最前面に表示する
		window_obj.focus();
	}

};
　
クリックしたときに、自身のウィンドウをランダムに移動する（絶対座標指定）

// 作成主が存在する（存在しない場合は制御できない）
if(window.opener){

	// ------------------------------------------------------------
	// クリックした時に実行されるイベント
	// ------------------------------------------------------------
	document.onclick = function (){

		// ランダムな位置
		var pos_x = Math.random() * screen.availWidth;
		var pos_y = Math.random() * screen.availHeight;

		// ウィンドウを移動する（絶対座標指定）
		window.moveTo(pos_x,pos_y);

	};

}
　

■ウィンドウの位置を変更する（移動量指定）

　
moveBy() メソッドを使用します。
　
相対的な移動量を指定します。
　
Window.moveBy( 水平移動量 , 垂直移動量 ) :Void
第01引数 Numberウィンドウの水平方向の移動量を指定。マイナス値で左、プラス値で右に移動。
第02引数 Numberウィンドウの垂直方向の移動量を指定。マイナス値で上、プラス値で下に移動。
戻り値 Voidなし。
　
■セキュリティについて
　
ユーザーが開いたウィンドウを、制御することはできません。
　
スクリプトから動的に作成したウィンドウのみ、移動することができます。
　
新しいタブが作られないように、ダイアログ風ウィンドウを作成するといいでしょう。
　
作成主から、開いた先のウィンドウを制御する場合、生成元（オリジン）が一致している必要があります。
　
「自身のウィンドウ」を制御する場合、「作成主」とオリジンが一致している必要はありません。
　
■使用例
　
クリックするたびにウィンドウをランダムに移動する（移動量指定）

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 空のダイアログ風ウィンドウを作成する
		window_obj = window.open("","_blank","width=300,height=300");

		// 新しいウィンドウの Document オブジェクトを取得する
		var document_obj = window_obj.document;

		// HTML 文書を出力
		document_obj.open();
		document_obj.write("<html><body>テスト</body></html>");
		document_obj.close();

	}else{

		// ランダムな移動量
		var ofs_x = (Math.random() * 2 - 1) * 100;
		var ofs_y = (Math.random() * 2 - 1) * 100;

		// ウィンドウを移動する（移動量指定）
		window_obj.moveBy(ofs_x,ofs_y);

		// ウィンドウを最前面に表示する
		window_obj.focus();
	}

};
　
クリックしたときに、自身のウィンドウをランダムに移動する（移動量指定）

// 作成主が存在する（存在しない場合は制御できない）
if(window.opener){

	// ------------------------------------------------------------
	// クリックした時に実行されるイベント
	// ------------------------------------------------------------
	document.onclick = function (){

		// ランダムな移動量
		var ofs_x = (Math.random() * 2 - 1) * 100;
		var ofs_y = (Math.random() * 2 - 1) * 100;

		// ウィンドウを移動する（移動量指定）
		window.moveBy(ofs_x,ofs_y);

	};

}
　

上に戻る

　

ウィンドウのサイズについて

　
ウィンドウのサイズを取得する
ウィンドウのサイズを変更する（絶対指定）
ウィンドウのサイズを変更する（相対指定）
ウィンドウのサイズが変化したか監視する
　


■ウィンドウのサイズを取得する

　
ウィンドウのサイズを取得するには、以下のプロパティを使用します。
　
プロパティ名型説明
outerWidthNumberウィンドウの幅（読み取り専用）
outerHeightNumberウィンドウの高さ（読み取り専用）
innerWidthNumberウィンドウのビューポートの幅（スクロールバーを含む）（読み取り専用）
innerHeightNumberウィンドウのビューポートの高さ（スクロールバーを含む）（読み取り専用）
　

■ウィンドウのサイズを取得する

　
以下のプロパティを使用します。
　
InternetExplorer 8 以前では、対応していません。
　
プロパティ名型説明
outerWidthNumberウィンドウの幅（読み取り専用）
outerHeightNumberウィンドウの高さ（読み取り専用）
　
■測定方法
　
このプロパティは、ウィンドウの外側から測定します。
　
　
■取得例
　
ウィンドウのサイズを取得する

// ------------------------------------------------------------
// リサイズされるたびに実行されるイベント
// ------------------------------------------------------------
window.onresize = function (){

	// ウィンドウのサイズを取得する
	var outer_w = window.outerWidth;
	var outer_h = window.outerHeight;

	// 出力テスト
	console.log("w:" + outer_w);
	console.log("h:" + outer_h);

};
　

■ウィンドウのビューポートのサイズを取得する

　
以下のプロパティを使用します。
　
InternetExplorer 8 以前では、対応していません。
　
プロパティ名型説明
innerWidthNumberウィンドウのビューポートの幅（スクロールバーを含む）（読み取り専用）
innerHeightNumberウィンドウのビューポートの高さ（スクロールバーを含む）（読み取り専用）
　
■測定方法
　
このプロパティは、スクロールバーを含みます。
　
　
フレームの場合も同様です。
　
　
　
■InternetExplorer 8 以前の場合
　
ドキュメントから、近似的なサイズを取得できます。
　
この場合、スクロールバーが測定値に含まれないので注意して下さい。
　
ウィンドウのビューポートのサイズを取得する関数

// --------------------------------------------------------------------------------
// ウィンドウのビューポートのサイズを取得する関数
// --------------------------------------------------------------------------------
function WindowGetViewportSize(window_obj){
	if(window_obj.innerWidth === undefined){
	}else if(window_obj.innerHeight === undefined){
	}else{
		return {
			width :window_obj.innerWidth,
			height:window_obj.innerHeight
		};
	}

	// ドキュメントのサイズを取得（スクロールバーは含まれない）
	var d = window_obj.document;
	var b = d.body;
	var r = d.documentElement;
	var w = b.clientWidth;
	var h;
	if(w < r.clientWidth)	w = r.clientWidth;
	if(d.compatMode == "BackCompat"){
		h = b.clientHeight;
	}else{
		if(r.clientHeight){
			h = r.clientHeight;
		}else{
			h = b.clientHeight;
		}
	}
	return {
		width :w,
		height:h
	};
}
　
■取得例
　
ウィンドウのビューポートのサイズを取得する

// --------------------------------------------------------------------------------
// ウィンドウのビューポートのサイズを取得する関数
// --------------------------------------------------------------------------------
function WindowGetViewportSize(window_obj){
	if(window_obj.innerWidth === undefined){
	}else if(window_obj.innerHeight === undefined){
	}else{
		return {
			width :window_obj.innerWidth,
			height:window_obj.innerHeight
		};
	}

	// ドキュメントのサイズを取得（スクロールバーは含まれない）
	var d = window_obj.document;
	var b = d.body;
	var r = d.documentElement;
	var w = b.clientWidth;
	var h;
	if(w < r.clientWidth)	w = r.clientWidth;
	if(d.compatMode == "BackCompat"){
		h = b.clientHeight;
	}else{
		if(r.clientHeight){
			h = r.clientHeight;
		}else{
			h = b.clientHeight;
		}
	}
	return {
		width :w,
		height:h
	};
}


// ------------------------------------------------------------
// リサイズされるたびに実行されるイベント
// ------------------------------------------------------------
window.onresize = function (){

	// ウィンドウのビューポートのサイズを取得する
	var inner_size = WindowGetViewportSize(window);

	// 出力テスト
	console.log("w:" + inner_size.width);
	console.log("h:" + inner_size.height);

};
　

■ウィンドウのサイズを変更する（絶対指定）

　
resizeTo() メソッドを使用します。
　
絶対値を指定します。
　
100 より小さくする事はできません。
　
Window.resizeTo( 幅 , 高さ ) :Void
第01引数 Numberウィンドウの幅を指定（スクリーン座標系）
第02引数 Numberウィンドウの高さを指定（スクリーン座標系）
戻り値 Voidなし。
　
■セキュリティについて
　
ユーザーが開いたウィンドウを、制御することはできません。
　
スクリプトから動的に作成したウィンドウのみ、サイズを変更することができます。
　
新しいタブが作られないように、ダイアログ風ウィンドウを作成するといいでしょう。
　
作成主から、開いた先のウィンドウを制御する場合、生成元（オリジン）が一致している必要があります。
　
「自身のウィンドウ」を制御する場合、「作成主」とオリジンが一致している必要はありません。
　
■使用例
　
クリックするたびにウィンドウのサイズをランダムに変更する（絶対指定）

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 空のダイアログ風ウィンドウを作成する
		window_obj = window.open("","_blank","left=0,top=0,width=300,height=300");

		// 新しいウィンドウの Document オブジェクトを取得する
		var document_obj = window_obj.document;

		// HTML 文書を出力
		document_obj.open();
		document_obj.write("<html><body>テスト</body></html>");
		document_obj.close();

	}else{

		// ランダムなサイズ
		var width  = Math.random() * screen.availWidth;
		var height = Math.random() * screen.availHeight;

		// ウィンドウのサイズを変更する（絶対指定）
		window_obj.resizeTo(width,height);

		// ウィンドウを最前面に表示する
		window_obj.focus();
	}

};
　
クリックしたときに、自身のウィンドウのサイズをランダムに変更する（絶対指定）

// 作成主が存在する（存在しない場合は制御できない）
if(window.opener){

	// ------------------------------------------------------------
	// クリックした時に実行されるイベント
	// ------------------------------------------------------------
	document.onclick = function (){

		// ランダムな位置
		var width  = Math.random() * screen.availWidth;
		var height = Math.random() * screen.availHeight;

		// ウィンドウのサイズを変更する（絶対指定）
		window.resizeTo(width,height);

	};

}
　

■ウィンドウのサイズを変更する（相対指定）

　
resizeBy() メソッドを使用します。
　
相対的な変化量を指定します。
　
100 より小さくする事はできません。
　
Window.resizeBy( 幅の変化量 , 高さの変化量 ) :Void
第01引数 Numberウィンドウの幅の変化量を指定。マイナス値で縮小、プラス値で拡大。
第02引数 Numberウィンドウの高さの変化量を指定。マイナス値で縮小、プラス値で拡大。
戻り値 Voidなし。
　
■セキュリティについて
　
ユーザーが開いたウィンドウを、制御することはできません。
　
スクリプトから動的に作成したウィンドウのみ、移動することができます。
　
新しいタブが作られないように、ダイアログ風ウィンドウを作成するといいでしょう。
　
作成主から、開いた先のウィンドウを制御する場合、生成元（オリジン）が一致している必要があります。
　
「自身のウィンドウ」を制御する場合、「作成主」とオリジンが一致している必要はありません。
　
■使用例
　
クリックするたびにウィンドウのサイズをランダムに変更する（相対指定）

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 空のダイアログ風ウィンドウを作成する
		window_obj = window.open("","_blank","left=0,top=0,width=300,height=300");

		// 新しいウィンドウの Document オブジェクトを取得する
		var document_obj = window_obj.document;

		// HTML 文書を出力
		document_obj.open();
		document_obj.write("<html><body>テスト</body></html>");
		document_obj.close();

	}else{

		// ランダムな変化量
		var ofs_w = (Math.random() * 2 - 1) * 100;
		var ofs_h = (Math.random() * 2 - 1) * 100;

		// ウィンドウのサイズを変更する（相対指定）
		window_obj.resizeBy(ofs_w,ofs_h);

		// ウィンドウを最前面に表示する
		window_obj.focus();
	}

};
　
クリックしたときに、自身のウィンドウのサイズをランダムに変更する（相対指定）

// 作成主が存在する（存在しない場合は制御できない）
if(window.opener){

	// ------------------------------------------------------------
	// クリックした時に実行されるイベント
	// ------------------------------------------------------------
	document.onclick = function (){

		// ランダムな変化量
		var ofs_w = (Math.random() * 2 - 1) * 100;
		var ofs_h = (Math.random() * 2 - 1) * 100;

		// ウィンドウのサイズを変更する（相対指定）
		window.resizeBy(ofs_w,ofs_h);

	};

}
　

■ウィンドウのサイズが変化したか監視する

　
onresize イベントを使用します。
　
ウィンドウのサイズが変化したか監視する

// ------------------------------------------------------------
// ウィンドウのサイズが変化するたびに実行される関数
// ------------------------------------------------------------
function WindowResizeFunc(e){
	
	console.log("ウィンドウのサイズが変化した");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(window.addEventListener){

	// ウィンドウのサイズが変化するたびに実行されるイベント
	window.addEventListener("resize" , WindowResizeFunc);

// アタッチイベントに対応している
}else if(window.attachEvent){

	// ウィンドウのサイズが変化するたびに実行されるイベント
	window.attachEvent("onresize" , WindowResizeFunc);

// イベントハンドラを使用する
}else{

	// ウィンドウのサイズが変化するたびに実行されるイベント
	window.onresize = WindowResizeFunc;

}
　

上に戻る

　

ウィンドウの奥行きについて

　
ウィンドウを最前面に移動する
ウィンドウのフォーカスを外す
　


■任意のウィンドウを最前面に移動する

　
focus() メソッドを使用します。
　
■セキュリティについて
　
ユーザーが開いたウィンドウを、制御することはできません。
　
スクリプトから動的に作成したウィンドウのみ、移動することができます。
　
新しいタブが作られないように、ダイアログ風ウィンドウを作成するといいでしょう。
　
マウスやキーボードなどの押下操作中に限って、実行する事ができます。
　
■使用例
　
クリックするたびにウィンドウの位置を最前面に移動する

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 空のダイアログ風ウィンドウを作成する
		window_obj = window.open("","_blank","width=300,height=300");

		// 新しいウィンドウの Document オブジェクトを取得する
		var document_obj = window_obj.document;

		// HTML 文書を出力
		document_obj.open();
		document_obj.write("<html><body>テスト</body></html>");
		document_obj.close();

	}else{

		// ウィンドウを最前面に表示する
		window_obj.focus();
	}

};
　

■任意のウィンドウのフォーカスを外す

　
blur() メソッドを使用します。
　
このメソッドは、Internet Explorer 以外では廃止されました。
　
任意のウィンドウが最前面に存在する場合、１つ奥に移動します。
　
■使用例
　
新しいウィンドウを作成した時に、最前面に表示しない

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 空のダイアログ風ウィンドウを作成する
		window_obj = window.open("","_blank","width=300,height=300");

		// 新しいウィンドウの Document オブジェクトを取得する
		var document_obj = window_obj.document;

		// HTML 文書を出力
		document_obj.open();
		document_obj.write("<html><body>テスト</body></html>");
		document_obj.close();

		// 新しいウィンドウのフォーカスを外す
		window_obj.blur();

	}

};
　

上に戻る

　

ウィンドウのスクロールについて

　
■スクロール位置を取得する
■スクロール位置を個別に変更する（絶対指定）
■スクロール位置を変更する（絶対指定）
■スクロール位置を変更する（相対指定）
■任意のエレメントが表示されるようにスクロールする
■スクロール可能な範囲について
■スクロール位置が変化したか監視する
■エレメント内のスクロールについて（IFRAME 要素など）
　


■スクロール位置を取得する

　
ウィンドウのスクロール位置を取得するには、以下のプロパティを使用します。
　
pageOffset 系は、InternetExplorer 8 以前では、対応していません。
　
scroll 系は、InternetExplorer 11 の時点では、対応していません。
　
プロパティ名型説明
pageXOffsetNumberウィンドウの水平方向のスクロール位置（scrollX と同等）（読み取り専用）
pageYOffsetNumberウィンドウの垂直方向のスクロール位置（scrollY と同等）（読み取り専用）
scrollXNumberウィンドウの水平方向のスクロール位置（読み取り専用）
scrollYNumberウィンドウの垂直方向のスクロール位置（読み取り専用）
　
■InternetExplorer 8 以前の場合
　
InternetExplorer 8 以前でも取得できる関数です。
　
ウィンドウのスクロール位置を取得する関数

// --------------------------------------------------------------------------------
// ウィンドウのスクロール位置を取得する関数
// --------------------------------------------------------------------------------
function WindowGetScrollPosition(window_obj){
	if(window_obj.pageXOffset === undefined){
	}else if(window_obj.pageYOffset === undefined){
	}else{
		return {
			x:window_obj.pageXOffset,
			y:window_obj.pageYOffset
		};
	}

	var d = window_obj.document;
	return {
		x:(d.documentElement.scrollLeft || d.body.scrollLeft),
		y:(d.documentElement.scrollTop  || d.body.scrollTop )
	};
}
　
■取得例
　
スクロール位置を取得する

// --------------------------------------------------------------------------------
// ウィンドウのスクロール位置を取得する関数
// --------------------------------------------------------------------------------
function WindowGetScrollPosition(window_obj){
	if(window_obj.pageXOffset === undefined){
	}else if(window_obj.pageYOffset === undefined){
	}else{
		return {
			x:window_obj.pageXOffset,
			y:window_obj.pageYOffset
		};
	}

	var d = window_obj.document;
	return {
		x:(d.documentElement.scrollLeft || d.body.scrollLeft),
		y:(d.documentElement.scrollTop  || d.body.scrollTop )
	};
}


// ------------------------------------------------------------
// スクロールされるたびに実行されるイベント
// ------------------------------------------------------------
window.onscroll = function (){

	var scroll_pos = WindowGetScrollPosition(window);

	// 出力テスト
	console.log("x:" + scroll_pos.x);
	console.log("y:" + scroll_pos.y);

};
　

■スクロール位置を個別に変更する（絶対指定）

　
<BODY> 要素にある、以下のプロパティを使用します。
　
プロパティ名型説明
scrollLeftNumberエレメント内の水平方向のスクロール位置を設定する。(単位:ピクセル)
scrollTopNumberエレメント内の垂直方向のスクロール位置を設定する。(単位:ピクセル)
　
■使用例
　
クリックしたときに、自身のウィンドウのスクロール位置をランダムに変更する（絶対指定）

// ------------------------------------------------------------
// ウィンドウの水平方向スクロール座標を変更する関数
// ------------------------------------------------------------
function WindowSetScrollPositionX (window_obj,x){
	var document_obj = window_obj.document;
	if(document_obj.body){
		document_obj.body.scrollLeft = x;
	}
	if(document_obj.documentElement){
		document_obj.documentElement.scrollLeft = x;
	}
}

// ------------------------------------------------------------
// ウィンドウの垂直方向スクロール座標を変更する関数
// ------------------------------------------------------------
function WindowSetScrollPositionY (window_obj,y){
	var document_obj = window_obj.document;
	if(document_obj.body){
		document_obj.body.scrollTop = y;
	}
	if(document_obj.documentElement){
		document_obj.documentElement.scrollTop = y;
	}
}

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// ランダムな位置
	var scroll_x = Math.random() * 1000;
	var scroll_y = Math.random() * 1000;

	// ウィンドウの水平方向スクロール座標を変更する（絶対指定）
	WindowSetScrollPositionX(window,scroll_x);

	// ウィンドウの垂直方向スクロール座標を変更する（絶対指定）
	WindowSetScrollPositionY(window,scroll_y);

};
　

■スクロール位置を変更する（絶対指定）

　
scrollTo() や scroll() メソッドを使用します。
　
どちらも同じ動作をします。
　
Window.scrollTo( 水平位置 , 垂直位置 ) :Void
第01引数 Numberスクロールの水平方向の位置を指定。
第02引数 Numberスクロールの垂直方向の位置を指定。
戻り値 Voidなし。
　
Window.scroll( 水平位置 , 垂直位置 ) :Void
第01引数 Numberスクロールの水平方向の位置を指定。
第02引数 Numberスクロールの垂直方向の位置を指定。
戻り値 Voidなし。
　
■セキュリティについて
　
作成主から、開いた先のウィンドウを制御する場合、生成元（オリジン）が一致している必要があります。
　
「自身のウィンドウ」を制御する場合、「作成主」とオリジンが一致している必要はありません。
　
■使用例
　
クリックしたときに、自身のウィンドウのスクロール位置をランダムに変更する（絶対指定）

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// ランダムな位置
	var scroll_x = Math.random() * 1000;
	var scroll_y = Math.random() * 1000;

	// ウィンドウのスクロール位置を変更する（絶対指定）
	window.scrollTo(scroll_x,scroll_y);

};
　
クリックするたびにウィンドウの位置をランダムに変更する（絶対指定）

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 空のダイアログ風ウィンドウを作成する
		window_obj = window.open("","_blank","width=300,height=300,scrollbars=1");

		// 新しいウィンドウの Document オブジェクトを取得する
		var document_obj = window_obj.document;

		// HTML 文書を出力
		document_obj.open();
		document_obj.write("<html><body><div style=\"width:3000px; height:3000px;\"></div></body></html>");
		document_obj.close();

	}else{

		// ランダムな位置
		var scroll_x = Math.random() * screen.availWidth;
		var scroll_y = Math.random() * screen.availHeight;

		// ウィンドウのスクロール位置を変更する（絶対指定）
		window_obj.scrollTo(scroll_x,scroll_y);

		// ウィンドウを最前面に表示する
		window_obj.focus();
	}

};
　
■ CSSOM View のスクロール
　
一部のブラウザでは、CSSOM View のスクロールに対応しています。
　
Window.scrollTo( ScrollToOptions ) :Void
第01引数(略可)ScrollToOptionsScrollToOptions オブジェクトを指定。
戻り値 Voidなし。
　
Window.scroll( ScrollToOptions ) :Void
第01引数(略可)ScrollToOptionsScrollToOptions オブジェクトを指定。
戻り値 Voidなし。
　
クリックしたときに、自身のウィンドウのスクロール位置をランダムに変更する（絶対指定）

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// ------------------------------------------------------------
	// ScrollToOptions オブジェクトを用意する
	// ------------------------------------------------------------
	var scroll_to_options = {
		left: Math.random() * 1000,	// 水平方向の位置
		top : Math.random() * 1000,	// 垂直方向の位置
		behavior : "smooth"		// スクロール動作方法
	};

	// ------------------------------------------------------------
	// ウィンドウのスクロール位置を変更する（絶対指定）
	// ------------------------------------------------------------
	window.scrollTo(scroll_to_options);

};
　

■スクロール位置を変更する（相対指定）

　
scrollBy() メソッドを使用します。
　
相対的な移動量を指定します。
　
Window.scrollBy( 水平移動量 , 垂直移動量 ) :Void
第01引数 Numberウィンドウのスクロール位置の水平方向の移動量を指定。マイナス値で左、プラス値で右に移動。
第02引数 Numberウィンドウのスクロール位置の垂直方向の移動量を指定。マイナス値で上、プラス値で下に移動。
戻り値 Voidなし。
　
■セキュリティについて
　
作成主から、開いた先のウィンドウを制御する場合、生成元（オリジン）が一致している必要があります。
　
「自身のウィンドウ」を制御する場合、「作成主」とオリジンが一致している必要はありません。
　
■使用例
　
クリックしたときに、自身のウィンドウのスクロール位置をランダムに変更する（相対指定）

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// ランダムな変化量
	var ofs_x = (Math.random() * 2 - 1) * 100;
	var ofs_y = (Math.random() * 2 - 1) * 100;

	// ウィンドウのスクロール位置を変更する（相対指定）
	window.scrollBy(ofs_x,ofs_y);

};
　
クリックするたびにウィンドウのスクロール位置をランダムに変更する（相対指定）

var window_obj = null;

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	if(!window_obj){

		// 空のダイアログ風ウィンドウを作成する
		window_obj = window.open("","_blank","left=0,top=0,width=300,height=300,scrollbars=1");

		// 新しいウィンドウの Document オブジェクトを取得する
		var document_obj = window_obj.document;

		// HTML 文書を出力
		document_obj.open();
		document_obj.write("<html><body><div style=\"width:3000px; height:3000px;\"></div></body></html>");
		document_obj.close();

	}else{

		// ランダムな変化量
		var ofs_x = (Math.random() * 2 - 1) * 100;
		var ofs_y = (Math.random() * 2 - 1) * 100;

		// ウィンドウのサイズを変更する（相対指定）
		window_obj.scrollBy(ofs_x,ofs_y);

		// ウィンドウを最前面に表示する
		window_obj.focus();
	}

};
　
■ CSSOM View のスクロール
　
一部のブラウザでは、CSSOM View のスクロールに対応しています。
　
Window.scrollBy( ScrollToOptions ) :Void
第01引数(略可)ScrollToOptionsScrollToOptions オブジェクトを指定。
戻り値 Voidなし。
　
クリックしたときに、自身のウィンドウのスクロール位置をランダムに変更する（相対指定）

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// ------------------------------------------------------------
	// ScrollToOptions オブジェクトを用意する
	// ------------------------------------------------------------
	var scroll_to_options = {
		left: (Math.random() * 2 - 1) * 100,	// 水平方向の移動量
		top : (Math.random() * 2 - 1) * 100,	// 垂直方向の移動量
		behavior : "smooth"			// スクロール動作方法
	};

	// ------------------------------------------------------------
	// ウィンドウのスクロール位置を変更する（相対指定）
	// ------------------------------------------------------------
	window.scrollBy(scroll_to_options);

};
　

■任意のエレメントが表示されるようにスクロールする

　
こちらで解説しています。
　

■スクロール可能な範囲について

　
「ドキュメント（HTML 全体）のサイズ」と、「クライアント領域のサイズ」を取得します。
　
ドキュメントのサイズの取得は、こちらで解説しています。
　
水平方向の最小値は、0 です。
　
水平方向の最大値は、(ドキュメントの幅 - クライアントの幅) です。
　
垂直方向の最小値は、0 です。
　
垂直方向の最大値は、(ドキュメントの高さ - クライアントの高さ) です。
　
■取得例
　
新しいウィンドウを作成した時に、最前面に表示しない

// --------------------------------------------------------------------------------
// ドキュメントのクライアント領域のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetClientSize(document_obj){
	var b = document_obj.body;
	var r = document_obj.documentElement;
	var w = b.clientWidth;
	var h;
	if(w < r.clientWidth)	w = r.clientWidth;
	if(document_obj.compatMode == "BackCompat"){
		h = b.clientHeight;
	}else{
		if(r.clientHeight){
			h = r.clientHeight;
		}else{
			h = b.clientHeight;
		}
	}
	return {
		width :w,
		height:h
	};
}


// --------------------------------------------------------------------------------
// ドキュメント（HTML 全体）のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetDocumentSize(document_obj){
	var e;
	var w = 0;
	var h = 0;

	e = document_obj.body;
	if(e){
		if(w < e.clientWidth)	w = e.clientWidth;
		if(w < e.scrollWidth)	w = e.scrollWidth;
		if(h < e.clientHeight)	h = e.clientHeight;
		if(h < e.scrollHeight)	h = e.scrollHeight;
	}
	e = document_obj.documentElement;
	if(e){
		if(w < e.clientWidth)	w = e.clientWidth;
		if(w < e.scrollWidth)	w = e.scrollWidth;
		if(h < e.clientHeight)	h = e.clientHeight;
		if(h < e.scrollHeight)	h = e.scrollHeight;
	}

	return {
		width :w,
		height:h
	};
}


// --------------------------------------------------------------------------------
// ウィンドウのスクロール位置を取得する関数
// --------------------------------------------------------------------------------
function WindowGetScrollPosition(window_obj){
	if(window_obj.pageXOffset === undefined){
	}else if(window_obj.pageYOffset === undefined){
	}else{
		return {
			x:window_obj.pageXOffset,
			y:window_obj.pageYOffset
		};
	}

	var d = window_obj.document;
	return {
		x:(d.documentElement.scrollLeft || d.body.scrollLeft),
		y:(d.documentElement.scrollTop  || d.body.scrollTop )
	};
}

// ------------------------------------------------------------
// スクロールするたびに実行されるイベント
// ------------------------------------------------------------
window.onscroll = function (){

	// ドキュメント（HTML 全体）のサイズを取得する
	var document_size = DocumentGetDocumentSize(document);

	// ドキュメントのクライアント領域のサイズを取得する
	var client_size = DocumentGetClientSize(document);

	// スクロール位置を取得する
	var scroll_pos = WindowGetScrollPosition(window);

	// スクロールの最大値を計算する
	var max_x = document_size.width  - client_size.width;
	var max_y = document_size.height - client_size.height;

	// 出力テスト
	console.log("x:" + scroll_pos.x + " / " + max_x);
	console.log("y:" + scroll_pos.y + " / " + max_y);
};
　

■スクロール位置が変化したか監視する

　
onscroll イベントを使用します。
　
■デスクトップ PC 向けのブラウザの場合
　
高頻度で発行されます。
　
再描画タイミングとほぼ一致します。
　
追従スクロールコンテンツなどに利用できます。
　
■モバイル向けのブラウザの場合
　
省電力化が優先され、極めて低頻度で発行されます。
　
■使用例
　
スクロール位置が変化したか監視する

// ------------------------------------------------------------
// スクロール位置が変化するたびに実行される関数
// ------------------------------------------------------------
function WindowScrollFunc(e){

	console.log("ウィンドウがスクロールした");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(window.addEventListener){

	// スクロール位置が変化するたびに実行されるイベント
	window.addEventListener("scroll" , WindowScrollFunc);

// アタッチイベントに対応している
}else if(window.attachEvent){

	// スクロール位置が変化するたびに実行されるイベント
	window.attachEvent("onscroll" , WindowScrollFunc);

// イベントハンドラを使用する
}else{

	// スクロール位置が変化するたびに実行されるイベント
	window.onscroll = WindowScrollFunc;

}
　

■ ScrollToOptions オブジェクトについて

　
オブジェクトを作成し、以下のプロパティを追加します。
　
プロパティ名型説明
leftNumber水平方向の値。
topNumber垂直方向の値。
behaviorScrollBehaviorスクロール動作方法を指定する。デフォルトは "auto"
　
■ ScrollBehavior 定数について
　
定数説明
"auto"scroll-behavior スタイルの値によって、自動的に変化する。
"instant"必ず瞬時に移動する。
"smooth"必ずズムーズに移動する。
　

上に戻る

　
前のページに戻る