自分自身のウィンドウオブジェクト(ウィンドウやフレームの総称)を示します。<script>~</script> の間では window. を省略することができ、下記の window.top や window.parent は単に top や parent と記述することができます。
self は自分自身、top はフレーム分割の際のトップ、parent はフレーム分割のひとつ親の、name はその名前を持つウィンドウ(フレーム)オブジェクトを示します。例えば下記の例では、mokuji フレームから見た main フレームの名前は window.top.main または window.parent.main となります。
自分自身を開いた親ウィンドウを示すウィンドウオブジェクトです。親ウィンドウに <form name="FORM1"> の <input type="text" name="TEXT1"> があるとき、下記のようにして親ウィンドウの入力項目に値を設定することができます。
window.opener.document.FORM1.TEXT1.value = "ABCDEFG";
ウィンドウ内に含まれるサブフレームの個数を示します。
<frame> の name 属性で指定した名前でウィンドウを指定します。例えば、ウィンドウが下記のように2つのフレームに分割されている場合、それぞれのフレーム(ウィンドウオブジェクト)は top.mokuji、top.main で参照することができます。
<frameset cols="100,*"> <frame name="mokuji" src="mokuji.html"> <frame name="main" src="main.html"> </frameset>
message をメッセージとする警告ダイアログを表示します。改行には \n を用います。本来は警告用ダイアログなのですが、手軽にメッセージを表示できるため、実際には警告以外の様々な目的で使用されています。
window.alert("○○が発生しました!!");
message をメッセージとする確認ダイアログを表示します。[OK] ボタンを押すと真(true)が、キャンセルボタンを押すと偽(false)が返されます。
if (window.confirm("よろしいですか?")) { document.F1.submit(); }
文字列入力ダイアログを表示します。message には説明を、default には文字列の初期値を指定します。入力された文字列は関数の戻り値として返されます。キャンセルボタンが押されると特殊値 null が返されます。
pwd = window.prompt("パスワードを入力してください。", "");
この機能は 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() の戻り値となります。
args = new Array(); args[0] = "AAA"; args[1] = "BBB"; val = showModalDialog("dlg.htm", args, "dialogHeight:100px;dialogWidth:300px");
focus() はこのウィンドウにフォーカスをあてます。blur() はこのウィンドウからフォーカスをはずします。
scroll() および scrollTo() は絶対座標で、scrollBy() は現在の位置からの相対座標で x、y の位置に画面をスクロールさせます。scroll() は古い仕様で、過去の互換性のために残されています。
resizeTo() は絶対座標で、resizeBy() は現在の大きさからの相対座標で、ウィンドウの大きさを x、y に変更します。100×100 よりも小さくすることはできないように、通常は制限されています。
moveTo() は絶対座標で、moveBy() は現在の位置からの相対座標で、ウィンドウの位置を x、y の場所に移動します。
読込みを停止します。
印刷を開始します。
ウィンドウの名前を示す文字列(<frame>タグの name 属性や、window.open()関数の第2引数で指定した名前)を返します。
alert(window.name); alert(top.mokuji.name);
ウィンドウの内側(表示領域)の高さと横幅を返します。IEでは document.body.clientHeight, document.body.clientWidth がこの属性に相当します。
ウィンドウの外枠の高さと横幅を返します。
スクロールされているときに、ページのどの部分が画面に表示されているかを示す縦・横方向位置を返します。IEでは document.body.scrollLeft, document.body.scrollTop がこの属性に相当します。
addEventListener(), removeEventListener() を参照してください。
Netscape Navigator 専用のイベント処理関数群。詳細未稿。
setTimeout() は msec ミリ秒後に func で指定した処理を行います。第3引数以降は関数への引数を指定します。
setTimeout(function() { console.log("Hello"); }, 1000);
clearTimeout() は setTimeout() で設定したタイマーを解除します。
timerID = setTimeout(function() { console.log("Hello"); }, 1000); clearTimeout(timerID);
基本的には setTimeout()、clearTimeout() と同様ですが、指定した処理を msec 毎に定期的に実行します。
setInterval(function() { console.log("Hello"); }, 1000);
clearInterval() は setInterval() で設定したインターバルを解除します。
intervalID = setInterval(function() { console.log("Hello"); }, 1000); clearInterval(intervalID);
ウィンドウをオープンします。オープンしたウィンドウのウィンドウオブジェクトを返します。document.open() とは別物です。
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] 開いたウィンドウの上下関係の順序を指定する。ただし、このオプションを用いるにはセキュリティの設定(未稿)が必要。 |
ウィンドウを閉じます。セキュリティ確保のため、自分自身が開いたウィンドウは警告無しに閉じることができますが、その他のウィンドウを閉じる際は、確認のダイアログが表示されます。
ウィンドウがすでに閉じられているかどうかを示す真偽値を返します。
forward() はヒストリ上ひとつ先のページに、back() はひとつ前のページに、home() はホームボタンを押したときに表示されるページにジャンプします。Netscape Navigator でサポートされていましたが、他のブラウザではサポートされていません。
ローカルストレージを示します。詳細は Web Storage を参照してください。
Web SQLデータベースを提供します。詳細は Web SQLデータベース を参照してください。
Indexed Database API を提供します。詳細は Indexed Database API を参照してください。
ロケーション(Location) オブジェクトを示します。
ドキュメント(Document) オブジェクトを示します。
ヒストリ(History) オブジェクトを示します。
ナビゲータ(Navigator) オブジェクトを示します。
古いブラウザには画面の下部にメッセージを表示する領域としてステータスバーがありました。status はステータスバーに(一時的に)表示する内容です。defaultStatus は、他に何も表示するものが無い場合のステータスバーのメッセージを示します。どちらとも設定も可能です。
window.status = "Welcome!"; window.defaultStatus = "This is default message.";
それぞれ、メニューバー(menubar)、ツールバー(toolbar)、ロケーションバー(locationbar)、ステータスバー(statusbar)、スクロールバー(scrollbar)、パーソナルバー(personalbar)が表示されているかどうかを示す真偽値です。参照のみで、書き込みによる変更はできません。
window.navigator と同義です。
オフスクリーンバッファリング機能(スクロールの際の画像表示を早くする機能?)を有効にするかどうかを指定します。起動時は "auto" ですが、これに true | false を代入して機能を制御することができます。
codeを JScript の構文として実行します。JavaScript として実行するにはlangに "JavaScript" を指定します。古い Internet Explorer でのみサポートされていました。最近の Internet Explorer や他のブラウザではサポートされていません。代わりに eval() を使用してください。
ウィンドウ内のテキストから string を検索します。string を省略した場合は検索文字列入力ダイアログが表示されます。case に true を指定すると大文字小文字を区別します。back に true を指定すると逆方向に検索します。文字列が見つかると true を返し、さもなくば false を返します。
HTMLヘルプを表示します。
btoa() は文字列 str を BASE64 エンコーディングした文字列にエンコード、atob() はその逆のデコードを行います。
HTML5 で定義された機能で、他のウィンドウやフレームにメッセージを送信します。第一引数には送信するメッセージ文字列を、第二引数はイベントを伝達するウィンドウの生成元を "*" または URI で指定します。受信側はウィンドウに対する onmessage イベントとして渡されます。セキュリティのため、最初に origin を確認する必要があります。
<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>
<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.length はその個数を、window.frames[i] は各要素を示します。
アプリケーションキャッシュを管理する OfflineResourceList オブジェクトを示します。この機能は非推奨となっており、廃止の方向にあります。代わりに Service Worker を使用してください。
ページ内で選択された箇所を示す Selection オブジェクトを返します。toString() により選択文字列を得ることができます。
<div>ABCDEFGHIJKLMN</div> <button onclick="console.log(window.getSelection().toString())">OK</button>
要素 element
の最終的に計算されたスタイル情報を取得します。
var element = document.getElementById("elm1"); var styles = window.getComputedStyle(element); console.log(styles.getPropertyValue("background-image"));