2020/6/10 JavaScript高級プログラム設計BOM

BOM(ブラウザオブジェクトモデル):ブラウザにアクセスするためのオブジェクトを提供します.
8.1 windowオブジェクト
 windowはBOMの核心の対象で、ブラウザの一例を表しています.

JavaScriptがブラウザウィンドウにアクセスするインターフェース

ECMAScriptに規定されたGlobalオブジェクト

8.1.1グローバルスコープ
グローバル変数はwindowの属性になりますが、グローバル変数を定義すると直接windowオブジェクトに属性を定義すると違います.グローバル変数はdeleteで削除できませんが、windowオブジェクトに定義されています.
これは、varを使用して追加されたwindow属性［Configrable］がfalseに設定されているからです.
未宣言の変数にアクセスするとエラーが発生しますが、windowオブジェクトを調べてみると、宣言されていない変数があるかどうかが分かります.

//       ，  oldValue   
var newValue = oldValue;

//        ，          
var newValue = window.oldValue;  //newValue   undefined

8.1.2ウィンドウ関係とフレームワーク
ページに枠が含まれている場合は、各フレームは自分のwindowオブジェクトを所有し、frame集合に保存します.frames集合では、数値インデックス/フレーム名により対応するwindowオブジェクトにアクセスすることができます.各windowオブジェクトにはname属性があります.その中にフレームの名前が含まれています.
PS 1:最上階のウィンドウにとっては、window.open()を通じて開かない限り、windowオブジェクトのname属性にはいかなる値も含まれません.
フレームに関するwindowオブジェクトの属性(オブジェクトでもあります):

top:常に最高(最外)層のフレーム、つまりブラウザウィンドウを指す.これを使用すると、別のフレームに正しくアクセスできます.どのフレームのコードにとっても、windowオブジェクトはそのフレームの特定のインスタンスであり、トップフレームではないからです.

parent:常に現在のフレームの直接上部フレームを指す.フレームがない場合、parentはtopに等しい.

self:ずっとwindowを指します.selfを導入する目的は、topおよびparentオブジェクトに対応するためだけであり、他の値は含まれていない.

8.1.3ウィンドウの位置
windowオブジェクトの位置を決定するための属性:screenLeft、screenTop/screenX、screenY、それぞれ画面の左側と上の位置を表します.
二つの方法がそれぞれサポートするブラウザ:
screenLeft,screenTop
IE、Safari、Opera、Chrome
screenX
Firefox、Safari、Chrome
ブラウザをまたいでウィンドウの位置のコードを取得します.

var leftPos = (typeof window.screenLeft == "number") ?
                        window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
                        window.screenTop : window.screenY;

短所:

screenTopは、画面上からwindowオブジェクトに表示されるページ可視領域までの距離(つまり、ページ可視領域上のブラウザツールバーのピクセル高さ)を表しています.

screenYは、画面に対するブラウザウィンドウ全体の座標値(0)を表している.

ウィンドウを新しい場所に正確に移動する方法:

moveTo():最新位置のx,y座標値を受信する.

moveBy():水平および垂直方向に移動する画素数を受信する.

PS:この2つの方法はブラウザによって無効にされる可能性があります.フレームに合わないので、一番外側のwindowオブジェクトにしか使えません.
8.1.4ウィンドウサイズ
 
IE 9+、Safari、Firefox
Opera
Chrome
inner Width、inner Height
ビューのサイズ
このコンテナのページビューのサイズ(枠の幅を減算)
視口サイズ
outer Width、outer Height
ブラウザウィンドウ自体のサイズ
ページビューのコンテナのサイズ(単一のタブページはブラウザウィンドウのサイズに対応)
視口サイズ
document.documentElement.client Width/ document.documentElement.clientHeight:ページビューの情報を保存しました.
resizett()とresizeBy():ブラウザウィンドウのサイズを調整します.(新しい幅の高さと新しいウィンドウと元のウィンドウの幅と高さの差をそれぞれ受信し、ブラウザで無効にすることもあります.)
8.1.5ナビゲーションとウィンドウを開く