JavaScript入門 | ブラウザオブジェクトモデル | Windowオブジェクト

Windowオブジェクト

windowオブジェクトはWebブラウザのウィンドウを表すオブジェクトであり、ほとんどのWebブラウザでサポートされている。

JavaScriptのすべてのオブジェクト、グローバル関数、グローバル変数は、自動的にwindowオブジェクトのプロパティになる。 windowオブジェクトのメソッドはグローバル関数であり、windowオブジェクトのプロパティはグローバル変数である。 ドキュメントオブジェクトモデル(DOM)の要素も、すべてwindowオブジェクトのプロパティになる。

ブラウザウィンドウのサイズ

windowオブジェクトのinnerHeightinnerWidthプロパティを利用すると、ブラウザウィンドウのサイズを取得できる。 ここでいうブラウザウィンドウとはWebブラウザのビューポートを意味し、ブラウザのツールバーやスクロールバーは含まれない。

構文

// 基本構文
window.innerHeight
window.innerWidth
// Internet Explorer 5から7までのバージョン専用の構文1
document.documentElement.clientHeight
document.documentElement.clientWidth
// Internet Explorer 5から7までのバージョン専用の構文2
document.body.clientHeight
document.body.clientWidth

次の例は、上記の構文を利用して、すべてのブラウザでウィンドウのサイズを返す例である。

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
document.write("Webブラウザの幅は " + windowWidth + " ピクセルで、高さは " + windowHeight + " ピクセルです。");

windowオブジェクトのすべてのメソッドやプロパティを使用するときは、windowという接頭辞を省略できる。 したがって、上の例でwindow.innerWidthの代わりに単にinnerWidthを使用しても正常に動作する。

次の例は、window接頭辞を省略できるさまざまな例を示している。

alert("グローバル関数を呼び出すときはwindow接頭辞を省略できます!");     // グローバル関数
document.write("現在のブラウザの水平位置は " + screenX + " です。<br>"); // グローバル変数
document.write("現在のブラウザの垂直位置は " + screenY + " です。<br>"); // グローバル変数
document.write(document.title);                                           // グローバルオブジェクト

上の例のように、JavaScriptのすべてのグローバルオブジェクト、グローバル関数、グローバル変数を使用するときは、window接頭辞を省略できる。

screenXは、そのブラウザウィンドウの左端とユーザーの画面の左端との距離を返す。 また、screenYは、そのブラウザウィンドウの上端とユーザーの画面の上端との距離を返す。

新しいブラウザウィンドウを開く

windowオブジェクトのopen()メソッドを利用すると、新しいブラウザウィンドウを開ける。 また、新しいブラウザウィンドウの詳細なオプションも個別に設定できる。

次の例は、メニューバー、アドレスバー、サイズ変更ハンドル、スクロールバー、ステータスバーだけを持つ新しいブラウザウィンドウを開く例である。

var newWindowObj;
// 変数strWindowFeaturesを通じて、新しく開くブラウザウィンドウのオプションを個別に設定できる。
var strWindowFeatures = "menubar = yes,location = yes,resizable = yes,scrollbars = yes,status = yes";
function openWindow() {
    newWindowObj = window.open("/html/intro", "HTML概要", strWindowFeatures);
}

ブラウザウィンドウを閉じる

windowオブジェクトのclose()メソッドを利用すると、現在のブラウザや特定のブラウザウィンドウを閉じられる。

function openWindow() {
    newWindowObj = window.open("/html/intro", "HTML概要", strWindowFeatures);
}
function closeNewWindow() { // 新しく開いたブラウザウィンドウをwindowオブジェクトを利用して再び閉じられる。
    newWindowObj.close();
}

Documentオブジェクト

windowオブジェクトの最も重要なプロパティの一つがdocumentオブジェクトである。 documentオブジェクトは、ブラウザウィンドウに表示される内容にあたる文書を表すオブジェクトである。