JavaScriptウィンドウ


ブラウザ オブジェクト モデル (BOM) は、JavaScript にブラウザと「対話」する機能を与えます。

ブラウザ オブジェクト モデル (BOM)

ブラウザ オブジェクト モデル (Browser ObjectModel (BOM)) の公式標準はありません。

最新のブラウザでは JavaScript の対話性のために (ほぼ) 同じメソッドとプロパティが実装されているため、BOM と見なされることが多いメソッドとプロパティ。

Window オブジェクト

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

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

グローバル変数はウィンドウオブジェクトのプロパティです。

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

HTML DOM のドキュメントも window オブジェクトのプロパティの 1 つです:

window.document.getElementById("header");

これと同じ:

document.getElementById("header");

ウィンドウ サイズ

ブラウザ ウィンドウ (ツールバーとスクロール バーを除く、ブラウザのビューポート) のサイズを決定するには 3 つの方法があります。

Internet Explorer、Chrome、Firefox、Opera、Safari の場合:

  • window.innerHeight - ブラウザ ウィンドウの内側の高さ

  • window.innerWidth - ブラウザ ウィンドウの内側の幅

インターネットの場合Explorer 8、7、6、5:

  • documentElement.clientHeight

  • document.documentElement.clientWidth

または

  • document.body.clientHeight

  • ドキュメント.ボディ。 clientWidth

実践的な JavaScript ソリューション (すべてのブラウザをカバー):

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>

例の実行»

オンライン例を表示するには、[例の実行] ボタンをクリックしてください

この例では、高さとブラウザウィンドウの幅: (ツールバー/スクロールバーを除く)

その他の Window メソッド

その他のメソッド:

  • window.open() - 新しいウィンドウを開きます

  • window.close() - ウィンドウを閉じます現在のウィンドウ

  • window.moveTo() - 現在のウィンドウを移動します

  • window.resizeTo() - 現在のウィンドウのサイズを調整します