JavaScript Window - ブラウザオブジェクトモデル

ブラウザオブジェクトモデル（Browser Object Model (BOM)）はJavaScriptがブラウザと対話するために許可されます。

ブラウザオブジェクトモデル（Browser Object Model (BOM)）

ブラウザオブジェクトモデル（BOM）には公式の標準は存在しません。

現代のブラウザは（ほぼ）同じメソッドと属性でJavaScriptのインタラクションを実現していますので、よくBOMのメソッドと属性として言及されます。

Windowオブジェクト

すべてのブラウザがサポートしています window オブジェクトです。ブラウザのウィンドウを表します。

すべてのグローバルJavaScriptオブジェクト、関数、変数は自動的にwindowオブジェクトのメンバーになります。

グローバル変数はwindowオブジェクトの属性です。

グローバル関数はwindowオブジェクトのメソッドです。

また（HTML DOMの）documentオブジェクトもwindowオブジェクトの属性です：

window.document.getElementById("header");

以下に等しい：

document.getElementById("header");

ウィンドウサイズ

これらの属性はブラウザのウィンドウのサイズを決定するために使用できます。

これらの属性はピクセルでサイズを返します：

  • window.innerHeight - ブラウザのウィンドウの内寸（ピクセルで計算）
  • window.innerWidth - ブラウザのウィンドウの内寸（ピクセルで計算）

ブラウザのウィンドウ（ブラウザのビューポート）にはツールバーとスクロールバーは含まれません。

Internet Explorer 8, 7, 6, 5に対して：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

または

  • document.body.clientHeight
  • document.body.clientWidth

実用的な JavaScript ソリューション（すべてのブラウザで動作します）：

例

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

自分で試してみる

この例では、ブラウザウィンドウの高さと幅を表示しています：（ツールバーとスクロールバーを含まない）

他のウィンドウメソッド

他の方法：

  • window.open() - 新しいウィンドウを開く
  • window.close() - 現在のウィンドウを閉じる
  • window.moveTo() - 現在のウィンドウを移動
  • window.resizeTo() - 現在のウィンドウを再調整