JavaScript ウィンドウ - ブラウザオブジェクトモデル

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

ブラウザオブジェクトモデル (BOM) には正式な標準はありません。

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

window オブジェクト

ブラウザがドキュメントを開くと、window オブジェクトが作成されます。つまり、window オブジェクトはブラウザで開かれているウィンドウを表します。

ウィンドウオブジェクトはグローバルオブジェクトであり、ウィンドウのプロパティはグローバル変数として使用できます。たとえば、window.document の代わりに document と書くこともできます。同様に、Window.alert() の代わりにalert() を記述するなど、現在のウィンドウオブジェクトのメソッドを関数として使用できます。

ドキュメントにフレームが含まれている場合、ブラウザはドキュメントのウィンドウオブジェクトとフレームごとに追加のウィンドウオブジェクトを作成します。

ヒント: window オブジェクトに関連する明確な標準はありませんが、すべてのブラウザがこのオブジェクトをサポートしています。

HTML DOM のドキュメントも window オブジェクトの属性の 1 つです:

window.document.getElementById("header");

これと同じ:

document.getElementById("header") ;

ウィンドウサイズ

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

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

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

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

Internet Explorer 8、7、6 の場合、5 :

document.documentElement.clientHeight

document.documentElement.clientWidth

または

document.body.clientHeight

document.body.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.open() - 新しいウィンドウを開きます

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

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

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

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> myWindow=window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") myWindow.moveTo(0,0) </script> </head> <body> <p>把新窗口移动到指定屏幕左上角（屏幕左上角为 0,0 坐标，往右和下计算为正）</p> </body> </html>

提出するリセットコード

自動運転