ホーム プログラミング言語 Web関連 javascript JS BOM (ブラウザ オブジェクト モデル)

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


 
 
Browser Object Model (Browser Object Model、BOM と呼ばれる) は、JavaScript のコンポーネントの 1 つです.BOM は、JavaScript プログラムにブラウザと対話する機能を提供します.

 

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> 

実行結果は下図の通りで、ページ上のボタンをクリックすることで対応する機能を実現することができます。

図 1: JS ウィンドウ オブジェクトでのメソッドの使用
図 1: JS ウィンドウ オブジェクトでのメソッドの使用

 

図 2: JS ウィンドウ オブジェクトでのメソッドの使用 (btoa)
図 2: JS ウィンドウ オブジェクトでのメソッドの使用 (btoa)
 

「JS BOM (ブラウザ オブジェクト モデル)」についてわかりやすく解説!絶対に観るべきベスト2動画

BOM ブラウザ オブジェクト モデル
モダールウィンドウをHTMLとCSSとJavascriptで実装してみよう