Browser Object Model (Browser Object Model、BOM と呼ばれる) は、JavaScript のコンポーネントの 1 つです.BOM は、JavaScript プログラムにブラウザと対話する機能を提供します.
図 1: JS ウィンドウ オブジェクトでのメソッドの使用 
図 2: JS ウィンドウ オブジェクトでのメソッドの使用 (btoa)
window オブジェクトは BOM の中核であり、現在のブラウザー ウィンドウを表すために使用され、ブラウザーを操作またはアクセスするための一連のメソッドとプロパティを提供します。また、JavaScript のすべてのグローバル オブジェクト、関数、変数も window オブジェクトに属し、先ほど紹介した document オブジェクトも window オブジェクトに属します。
注: HTML ドキュメントにフレーム (<frame> または <iframe> タグ) が含まれている場合、ブラウザーは、HTML ドキュメントのウィンドウ オブジェクトを作成するときに、フレームごとに追加のウィンドウ オブジェクトを作成します。
コンテンツ
表示
ウィンドウ オブジェクトのプロパティ
次の表に、ウィンドウ オブジェクトで提供されるプロパティとその説明を示します。
| 属性 | 説明 |
|---|---|
| closed | ウィンドウが閉じられたかどうかを返します |
| defaultStatus | ウィンドウのステータスバーにデフォルトのテキストを設定または返す |
| document | Document オブジェクトへの読み取り専用参照 |
| frames | ウィンドウ内のすべての名前付きフレームのコレクションを返します。コレクションは Window オブジェクトで構成され、各 Window オブジェクトにはウィンドウ内の <frame> または <iframe> タグが含まれます |
| history | ユーザーがブラウザでアクセスした URL を含む History オブジェクトへの読み取り専用参照 |
| innerHeight | ツールバーとスクロール バーを除いたブラウザ ウィンドウの高さを返します。 |
| innerWidth | ツールバーとスクロール バーを除いたブラウザ ウィンドウの幅を返します。 |
| localStorage | 一部のデータをキーと値のペアの形式でブラウザに保存します。保存されたデータには有効期限がなく、手動で削除するまでブラウザに永久に保存されます。 |
| length | 現在のウィンドウの <iframe> フレームの数を返します |
| location | 現在の URL に関する情報を含むウィンドウまたはフレームを参照する Location オブジェクト |
| name | ウィンドウの名前を設定または返す |
| navigator | 現在のブラウザに関する情報を含む Navigator オブジェクトへの読み取り専用参照 |
| opener | このウィンドウを作成したウィンドウ オブジェクトへの参照を返します |
| outerHeight | ツールバーとスクロールバーを含むブラウザ ウィンドウの高さ全体を返します |
| outerWidth | ツールバーとスクロールバーを含むブラウザウィンドウの全幅を返します |
| pageXOffset | ブラウザ ウィンドウの左上隅を基準とした現在のページの水平スクロール距離を設定または取得します |
| pageYOffset | ブラウザ ウィンドウの左上隅を基準とした現在のページの垂直方向のスクロール距離を設定または取得します |
| parent | 親ウィンドウに戻る |
| screen | コンピュータ画面に関する情報を含む Screen オブジェクトへの読み取り専用参照 |
| screenLeft | コンピュータ画面に対するブラウザ ウィンドウの X 座標を返します。 |
| screenTop | コンピュータ画面に対するブラウザ ウィンドウの Y 座標を返します。 |
| screenX | コンピュータ画面に対するブラウザ ウィンドウの X 座標を返します。 |
| sessionStorage | 一部のデータをキーと値のペアの形式でブラウザーに保存します。データはブラウザー ウィンドウまたはタブを閉じた後に削除されます |
| screenY | コンピュータ画面に対するブラウザ ウィンドウの Y 座標を返します。 |
| self | ウィンドウ オブジェクトへの参照を返します |
| status | ウィンドウ ステータス バーのテキストを設定する |
| top | 最上位の親ウィンドウを返します |
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
window.defaultStatus = "JavaScript"
document.write(window.defaultStatus + "<br>"); // 出力：JavaScript
document.write(window.innerHeight + "<br>"); // 出力：314
document.write(window.innerWidth + "<br>"); // 出力：539
document.write(window.length + "<br>"); // 出力：0
document.write(window.location + "<br>"); // 出力：file:///F:/code/index.html
document.write(window.opener + "<br>"); // 出力：null
document.write(window.outerHeight + "<br>"); // 出力：558
document.write(window.outerWidth + "<br>"); // 出力：555
document.write(window.parent + "<br>"); // 出力：[object Window]
document.write(window.screenLeft + "<br>"); // 出力：2263
document.write(window.screenTop + "<br>"); // 出力：401
document.write(window.screenX + "<br>"); // 出力：2263
document.write(window.screenY + "<br>"); // 出力：401
</script>
</body>
</html> ウィンドウ オブジェクトのメソッド
ウィンドウ オブジェクトで提供されるメソッドとその説明を次の表に示します。
| 方法 | 説明 |
|---|---|
| alert() | ブラウザ ウィンドウにプロンプト ボックスが表示され、プロンプト ボックスに確認ボタンが表示されます。 |
| atob() | base-64 でエンコードされた文字列をデコードする |
| btoa() | base-64 でエンコードされた文字列を作成する |
| blur() | トップレベル ウィンドウからキーボード フォーカスを移動する |
| clearInterval() | setInterval() メソッドで設定したタイマーをキャンセルします |
| clearTimeout() | setTimeout() メソッドによって設定されたタイマーをキャンセルします |
| close() | ブラウザ ウィンドウを閉じる |
| confirm() | ブラウザに確認ボタンとキャンセル ボタンのあるダイアログをポップアップ表示する |
| createPopup() | ポップアップ ウィンドウを作成します。注: IE ブラウザのみがこの方法をサポートしています。 |
| focus() | ウィンドウにフォーカスする |
| getSelection() | ユーザーが選択したテキストまたはカーソルの現在の位置を含む Selection オブジェクトを返します |
| getComputedStyle() | 指定された要素の CSS スタイルを取得する |
| matchMedia() | 指定されたメディアクエリの解析結果を表す MediaQueryList オブジェクトを返します |
| moveBy() | 指定したピクセルだけブラウザ ウィンドウを移動する |
| moveTo() | ブラウザ ウィンドウを指定した座標に移動する |
| open() | 新しいブラウザ ウィンドウを開くか、名前付きウィンドウを見つけます |
| print() | 現在のウィンドウの内容を印刷する |
| prompt() | ユーザー入力用のダイアログ ボックスを表示する |
| resizeBy() | 指定されたピクセルに従ってウィンドウのサイズを調整します。つまり、指定されたピクセルでウィンドウのサイズを増減します。 |
| resizeTo() | 指定した幅と高さにウィンドウのサイズを変更します |
| scroll() | 廃止。代わりに scrollTo() メソッドを使用できます |
| scrollBy() | 指定されたピクセルだけウィンドウの内容をスクロールします |
| scrollTo() | ウィンドウの内容を指定された座標までスクロールします |
| setInterval() | 指定された期間 (ミリ秒単位) の間、指定された関数または式を連続して呼び出すタイマーを作成します。 |
| setTimeout() | 指定された期間 (ミリ秒単位) が経過した後、指定された関数または式を 1 回だけ呼び出すタイマーを作成します。 |
| skip() | ページの読み込みを停止する |
| postMessage() | クロスオリジン通信を安全に実装 |
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p id="show_tag">ここにボタンをクリックした際の効果が表示されます</p>
<button onclick="myBtoa()">btoa()</button>
<button onclick="myAtob()">atob()</button>
<button onclick="myAlert()">alert()</button>
<button onclick="myConfirm()">confirm()</button>
<button onclick="myOpen()">open()</button>
<button onclick="myMoveBy()">moveBy()</button>
<button onclick="myMoveTo()">moveTo()</button>
<button onclick="myPrint()">print()</button>
<button onclick="myPrompt()">prompt()</button>
<button onclick="myResizeBy()">resizeBy()</button>
<button onclick="myClose()">close()</button>
<script type="text/javascript">
var ptag = document.getElementById('show_tag');
var str;
function myBtoa(){
str = btoa("JavaScript");
ptag.innerHTML = str;
}
function myAtob(){
ptag.innerHTML = typeof str;
if(str == undefined){
ptag.innerHTML = "btoa()ボタンを先にクリックしてください";
return;
}
ptag.innerHTML = atob(str);
}
function myAlert(){
alert("これはアラートです！");
}
function myConfirm(){
var x;
var r = confirm("ボタンをクリックしてください！");
if (r == true){
x = "「OK」ボタンをクリックしました！";
}
else{
x = "「キャンセル」ボタンをクリックしました！";
}
ptag.innerHTML = x;
}
var myWin;
function myOpen(){
if(myWin == undefined || (myWin != undefined && myWin.closed == true)){
myWin = window.open('', '', 'width=200,height=100');
}else{
return;
}
}
function myMoveBy(){
if(myWin == undefined || myWin.closed == true) myOpen();
myWin.moveBy(200, 200);
}
function myMoveTo(){
if(myWin == undefined || myWin.closed == true) myOpen();
myWin.moveTo(0, 0);
}
function myPrint(){
print();
}
function myPrompt(){
var name = prompt("あなたの名前を入力してください。")
if (name != null && name != ""){
ptag.innerHTML = "こんにちは " + name + "さん！お元気ですか？";
} else {
ptag.innerHTML = "何も入力されませんでした";
}
}
function myResizeBy(){
if(myWin == undefined || myWin.closed == true) myOpen();
myWin.resizeBy(100, 100);
}
function myClose(){
if(myWin == undefined) return;
if(myWin != undefined && myWin.closed == false) myWin.close();
}
</script>
</body>
</html> 実行結果は下図の通りで、ページ上のボタンをクリックすることで対応する機能を実現することができます。
「JS BOM (ブラウザ オブジェクト モデル)」についてわかりやすく解説！絶対に観るべきベスト2動画
BOM ブラウザ オブジェクト モデル
モダールウィンドウをHTMLとCSSとJavascriptで実装してみよう
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
