ウィンドウ(Window)

[up] [prev] [next]

目次

ウィンドウオブジェクト

window

自分自身のウィンドウオブジェクト(ウィンドウやフレームの総称)を示します。<script>~</script> の間では window. を省略することができ、下記の window.top や window.parent は単に top や parent と記述することができます。

window.self
window.top
window.parent

self は自分自身、top はフレーム分割の際のトップ、parent はフレーム分割のひとつ親の、name はその名前を持つウィンドウ(フレーム)オブジェクトを示します。例えば下記の例では、mokuji フレームから見た main フレームの名前は window.top.main または window.parent.main となります。

window.opener

自分自身を開いた親ウィンドウを示すウィンドウオブジェクトです。親ウィンドウに <form name="FORM1"> の <input type="text" name="TEXT1"> があるとき、下記のようにして親ウィンドウの入力項目に値を設定することができます。

JavaScript
window.opener.document.FORM1.TEXT1.value = "ABCDEFG";
window.length

ウィンドウ内に含まれるサブフレームの個数を示します。

window.name

<frame> の name 属性で指定した名前でウィンドウを指定します。例えば、ウィンドウが下記のように2つのフレームに分割されている場合、それぞれのフレーム(ウィンドウオブジェクト)は top.mokuji、top.main で参照することができます。

HTML
<frameset cols="100,*">
  <frame name="mokuji" src="mokuji.html">
  <frame name="main" src="main.html">
</frameset>

ダイアログ表示

window.alert(message)

message をメッセージとする警告ダイアログを表示します。改行には \n を用います。本来は警告用ダイアログなのですが、手軽にメッセージを表示できるため、実際には警告以外の様々な目的で使用されています。

JavaScript
window.alert("○○が発生しました!!");
window.confirm(message)

message をメッセージとする確認ダイアログを表示します。[OK] ボタンを押すと真(true)が、キャンセルボタンを押すと偽(false)が返されます。

JavaScript
if (window.confirm("よろしいですか?")) {
  document.F1.submit();
}
window.prompt(message [, default])

文字列入力ダイアログを表示します。message には説明を、default には文字列の初期値を指定します。入力された文字列は関数の戻り値として返されます。キャンセルボタンが押されると特殊値 null が返されます。

JavaScript
pwd = window.prompt("パスワードを入力してください。", "");
window.showModalDialog(url [, arg [, opt]])
window.showModelessDialog(url [, arg [, opt]])
window.dialogArguments
window.dialogHeight
window.dialogWidth
window.dialogLeft
window.dialogTop
window.returnValue

この機能は Chrome 43, Firefox 56 で廃止されました。他のブラウザでも順次廃止される可能性があります。url を内容とするダイアログを表示します。arg には数値、文字列、配列などの引数を指定します。opt には dialogWidth:px, dialogHeight:px, dialogTop:px, dialogLeft:px, center:(yes|no), dialogHide:(yes|no), edge:(sunken|raised), resizable:(yes|no), scroll:(yes|no), status:(yes|no), unadorned:(yes|no) を指定できます。ダイアログ側は dialogArguments により引数を参照可能。ダイアログを閉じる際に returnValue に設定されていた値が showModalDialog() の戻り値となります。

JavaScript
args = new Array();
args[0] = "AAA";
args[1] = "BBB";
val = showModalDialog("dlg.htm", args,
  "dialogHeight:100px;dialogWidth:300px");

ウィンドウ制御

window.focus()
window.blur()

focus() はこのウィンドウにフォーカスをあてます。blur() はこのウィンドウからフォーカスをはずします。

window.scroll(x, y)
window.scrollTo(x, y)
window.scrollBy(x, y)

scroll() および scrollTo() は絶対座標で、scrollBy() は現在の位置からの相対座標で xy の位置に画面をスクロールさせます。scroll() は古い仕様で、過去の互換性のために残されています。

window.resizeTo(x, y)
window.resizeBy(x, y)

resizeTo() は絶対座標で、resizeBy() は現在の大きさからの相対座標で、ウィンドウの大きさを xy に変更します。100×100 よりも小さくすることはできないように、通常は制限されています。

window.moveTo(x, y)
window.moveBy(x, y)

moveTo() は絶対座標で、moveBy() は現在の位置からの相対座標で、ウィンドウの位置を xy の場所に移動します。

window.stop()

読込みを停止します。

window.print()

印刷を開始します。

ウィンドウ情報

window.name

ウィンドウの名前を示す文字列(<frame>タグの name 属性や、window.open()関数の第2引数で指定した名前)を返します。

JavaScript
alert(window.name);
alert(top.mokuji.name);
window.innerHeight
window.innerWidth

ウィンドウの内側(表示領域)の高さと横幅を返します。IEでは document.body.clientHeight, document.body.clientWidth がこの属性に相当します。

window.outerHeight
window.outerWidth

ウィンドウの外枠の高さと横幅を返します。

window.pageXOffset
window.pageYOffset

スクロールされているときに、ページのどの部分が画面に表示されているかを示す縦・横方向位置を返します。IEでは document.body.scrollLeft, document.body.scrollTop がこの属性に相当します。

イベント

window.addEventListener(event, function)
window.removeEventListener(type, listener[, options])

addEventListener(), removeEventListener() を参照してください。

window.captureEvents(events)
window.disableExternalCapture()
window.enableExternalCapture()
window.handleEvent(event)
window.releaseEvents(events)
window.routeEvent(event)

Netscape Navigator 専用のイベント処理関数群。詳細未稿。

タイマ

window.setTimeout(func, msec [, arg3,...])

setTimeout() は msec ミリ秒後に func で指定した処理を行います。第3引数以降は関数への引数を指定します。

JavaScript
setTimeout(function() {
  console.log("Hello");
}, 1000);
window.clearTimeout(timerID)

clearTimeout() は setTimeout() で設定したタイマーを解除します。

JavaScript
timerID = setTimeout(function() { console.log("Hello"); }, 1000);
clearTimeout(timerID);
window.setInterval(func, msec [, arg1,...])

基本的には setTimeout()、clearTimeout() と同様ですが、指定した処理を msec 毎に定期的に実行します。

JavaScript
setInterval(function() {
  console.log("Hello");
}, 1000);
window.clearInterval(intervalID)

clearInterval() は setInterval() で設定したインターバルを解除します。

JavaScript
intervalID = setInterval(function() { console.log("Hello"); }, 1000);
clearInterval(intervalID);

ページを開く

window.open(url, name [, style])

ウィンドウをオープンします。オープンしたウィンドウのウィンドウオブジェクトを返します。document.open() とは別物です。

JavaScript
w = window.open("test.html", "Test", "width=200,height=200");

url には表示するページのアドレス(URL)を指定します。

name には、<frame> タグの name 属性で指定した名前や、他の open() で作成した名前を指定します。その名前を持つウィンドウがまだ存在しない場合は、その名前を持つ新規ウィンドウが開きます。下記の名前は特別な意味をちます。IE や Netscape Communicator 4.* では、ハイフン(-)を含む名前を指定するとエラーになるようです。

名前 意味
_top フレーム分割の際のトップフレーム(ウィンドウ)。
_blank 名前無しの新しいウィンドウ。
_self 自分自身のフレーム(ウィンドウ)。
_parent フレーム分割の際のひとつ親のフレーム(ウィンドウ)。

style にはウィンドウのスタイルを指定します。n にはピクセル値を、yes | no には yes または no を指定します。複数指定する場合は、width=100,height=50,menubar=no のようにカンマで連結します。カンマの前後にスペースを入れると動作しないブラウザがあるので注意してください。

スタイル 意味
alwaysLowered=yes|no [N4] 開いたウィンドウを常に他のウィンドウの下に表示する。ただし、このオプションを用いるにはセキュリティの前準備が必要。
alwaysRaised=yes|no [N4] 開いたウィンドウを常に他のウィンドウの上に表示する。ただし、このオプションを用いるにはセキュリティの前準備が必要。
channelmode=yes|no [e4] チャネルモードで開く。
dependent=yes|no [N4] 親ウィンドウが閉じた時に子ウィンドウも閉じる。
directories=yes|no [e3/N2] ユーザ設定ツールバーの表示。
fullscreen=yes|no [e4] フルスクリーンモードで開く。閉じるには ALT+F4 を使う。
height=n [e3/N2] ウィンドウの高さ。
hotkeys=yes|no [N4] ホットキーの有効/無効。
innerHeight=n [N4] ウィンドウの内枠の高さ。
innerWidth=n [N4] ウィンドウの内枠の横幅。
left=n [e4] ウィンドウの位置(画面の左端からの距離)。
location=yes|no [e3/N2] 場所ツールバーの表示。
menubar=yes|no [e3/N2] メニューバーの表示。
outerHeight=n [N4] ウィンドウの外枠の高さ。
outerWidth=n [N4] ウィンドウの外枠の横幅。
personalbar=yes|no [N2] directoriesと同じ。
resizable=yes|no [e3/N2] リサイズを可能にする。
screenX=n [N4] leftと同じ。
screenY=n [N4] topと同じ。
scrollbars=yes|no [e3/N2] スクロールバーの表示。
status=yes|no [e3/N2] ステータスバーの表示。
titlebar=yes|no [e4/N4] タイトルバーの表示。ただし、このオプションを用いるにはセキュリティの設定(未稿)が必要。
toolbar=yes|no [e3/N2] ツールバーの表示。
top=n [e4] ウィンドウの位置(画面の上端からの距離)。
width=n [e3/N2] ウィンドウの横幅。
z-lock=yes|no [N4] 開いたウィンドウの上下関係の順序を指定する。ただし、このオプションを用いるにはセキュリティの設定(未稿)が必要。

window.close()

ウィンドウを閉じます。セキュリティ確保のため、自分自身が開いたウィンドウは警告無しに閉じることができますが、その他のウィンドウを閉じる際は、確認のダイアログが表示されます。

window.closed

ウィンドウがすでに閉じられているかどうかを示す真偽値を返します。

ヒストリ

window.forward()
window.back()
window.home()

forward() はヒストリ上ひとつ先のページに、back() はひとつ前のページに、home() はホームボタンを押したときに表示されるページにジャンプします。Netscape Navigator でサポートされていましたが、他のブラウザではサポートされていません。

ローカルデータアクセス

window.localStorage

ローカルストレージを示します。詳細は Web Storage を参照してください。

window.openDatabase()

Web SQLデータベースを提供します。詳細は Web SQLデータベース を参照してください。

window.indexedDB

Indexed Database API を提供します。詳細は Indexed Database API を参照してください。

その他

window.location

ロケーション(Location) オブジェクトを示します。

window.document

ドキュメント(Document) オブジェクトを示します。

window.history

ヒストリ(History) オブジェクトを示します。

ナビゲータ(Navigator) オブジェクトを示します。

window.status
window.defaultStatus

古いブラウザには画面の下部にメッセージを表示する領域としてステータスバーがありました。status はステータスバーに(一時的に)表示する内容です。defaultStatus は、他に何も表示するものが無い場合のステータスバーのメッセージを示します。どちらとも設定も可能です。

JavaScript
window.status = "Welcome!";
window.defaultStatus = "This is default message.";
window.toolbar.visible
window.locationbar.visible
window.statusbar.visible
window.scrollbars.visible
window.personalbar.visible

それぞれ、メニューバー(menubar)、ツールバー(toolbar)、ロケーションバー(locationbar)、ステータスバー(statusbar)、スクロールバー(scrollbar)、パーソナルバー(personalbar)が表示されているかどうかを示す真偽値です。参照のみで、書き込みによる変更はできません。

window.clientInformation

window.navigator と同義です。

window.offscreenBuffering

オフスクリーンバッファリング機能(スクロールの際の画像表示を早くする機能?)を有効にするかどうかを指定します。起動時は "auto" ですが、これに true | false を代入して機能を制御することができます。

window.execScript(code [, lang])

codeを JScript の構文として実行します。JavaScript として実行するにはlangに "JavaScript" を指定します。古い Internet Explorer でのみサポートされていました。最近の Internet Explorer や他のブラウザではサポートされていません。代わりに eval() を使用してください。

window.find([string [, case [, back]]])

ウィンドウ内のテキストから string を検索します。string を省略した場合は検索文字列入力ダイアログが表示されます。case に true を指定すると大文字小文字を区別します。back に true を指定すると逆方向に検索します。文字列が見つかると true を返し、さもなくば false を返します。

window.showHelp(url [, id [, opt]])

HTMLヘルプを表示します。

window.atob(str)
window.btoa(str)

btoa() は文字列 str を BASE64 エンコーディングした文字列にエンコード、atob() はその逆のデコードを行います。

window.postMessage(message, targetOrigin)

HTML5 で定義された機能で、他のウィンドウやフレームにメッセージを送信します。第一引数には送信するメッセージ文字列を、第二引数はイベントを伝達するウィンドウの生成元を "*" または URI で指定します。受信側はウィンドウに対する onmessage イベントとして渡されます。セキュリティのため、最初に origin を確認する必要があります。

HTML
<iframe id="ifrm" src="ifrm.html"></iframe>
<button id="btn">OK</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
  var ifrm = document.getElementById("ifrm").contentWindow;
  ifrm.postMessage('Hello!!!', '*');
});
</script>
ifrm.html
<div id="out"></div>
<script>
window.addEventListener("message", function(e) {
  if (e.origin !== "http://example.com") {
    return;
  }
  document.getElementById("out").innerText = e.data;
}, false);
</script>
window.frames
window.frames.length
window.frames[n]

ウィンドウ内に含まれるフレームのリストを示します。window.frames.length はその個数を、window.frames[i] は各要素を示します。

window.applicationCache

アプリケーションキャッシュを管理する OfflineResourceList オブジェクトを示します。この機能は非推奨となっており、廃止の方向にあります。代わりに Service Worker を使用してください。

window.getSelection()

ページ内で選択された箇所を示す Selection オブジェクトを返します。toString() により選択文字列を得ることができます。

HTML
<div>ABCDEFGHIJKLMN</div>
<button onclick="console.log(window.getSelection().toString())">OK</button>
window.getComputedStyle(element)

要素 element の最終的に計算されたスタイル情報を取得します。

JavaScript
var element = document.getElementById("elm1");
var styles = window.getComputedStyle(element);
console.log(styles.getPropertyValue("background-image"));

[up] [prev] [next]
Copyright (C) 1996-2018 杜甫々
改訂版初版:2001年5月20日、最終更新:2018年5月6日
http://www.tohoho-web.com/js/window.htm