[JS インタラクション] BOM の基本、ウィンドウ、場所、ナバゲーター、画面、履歴オブジェクト

1.BOMの概要

JavaScript 言語には、組み込みオブジェクト、ホストオブジェクト、カスタムオブジェクトの 3 種類のオブジェクトがあります。

ホストオブジェクトは、JavaScript スクリプトが実行される環境によって提供されるオブジェクトです。Web プログラミングの場合、jsブラウザ上で実行されるため、Web プログラミングの場合、ホストオブジェクトはブラウザオブジェクトであり、ブラウザオブジェクトを学習するには、ブラウザオブジェクトモデル、つまり BOM を学習する必要があります。

JavaScript の基礎から高度な
 キャンバスゲーム開発
 ネイティブ JavaScipt 事例集
 JavaScript + DOM の基礎

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

BOM は主にウィンドウ間の通信を管理するために使用されるため、そのコアオブジェクトはウィンドウ (つまり、ウィンドウオブジェクト) です。
ブラウザオブジェクトモデル (ブラウザオブジェクトモデル) 正式な標準はありませんが、最新のブラウザは JavaScript インタラクティビティと (ほぼ) 同じメソッドとプロパティを実装しているため、多くの場合、BOM のメソッドとプロパティと見なされます。

ここに画像の説明を挿入

2、Window オブジェクト

2.1 概要

clipboardDataブラウザモデルの最上位オブジェクトとして、ウィンドウオブジェクトは現在のブラウザウィンドウを参照し、その下にはドキュメント、履歴、場所、ナビゲータ、画面、その他のオブジェクトを指す対応する読み取り専用属性があります。
すべてのブラウザは window オブジェクトをサポートしており、すべての JavaScript グローバルオブジェクト、関数、変数は自動的に window オブジェクトのメンバーになります (グローバル変数は window オブジェクトのプロパティ、グローバル関数は window オブジェクトのメソッド、さらには Html Dom のドキュメントです)これも window オブジェクトのプロパティの 1 つです。

window.document.getElementById("myId")がとdocument.getElementById("myId")同じ場合。

2.2 窓の開閉

open(url, target, args) 新しいウィンドウを開きます
- パラメータの URL はオプションです。開く URL またはパス
- パラメータのターゲットはオプションです。窓の開け方
- パラメータ args はオプションです。ウィンドウスタイルの設定。key=value のパラメータ文字列。ウィンドウ設定のスタイルパラメータは次のとおりです。
  - top=ピクセル値、ウィンドウの上部から画面の上部までのピクセル数
  - left=ピクセル値、ウィンドウの左端から画面の左端までのピクセル数
  - width=ピクセル値、ウィンドウの幅 height=ピクセル値、ウィンドウの高さ
  - menubar=yes|no、ウィンドウにメニューがあるかどうかを設定します
  - toolbar=yes|no、ウィンドウにツールバーがあるかどうかを設定します
  - スクロールバー=yes|no、ウィンドウにスクロールバーがあるかどうかを設定します。
  - status=yes|no、ウィンドウにステータスバーがあるかどうかを設定します。
close() は現在のウィンドウを閉じます

2.3 ウィンドウの関係とフレームワーク

window.open() によって作成された新しいウィンドウの Window オブジェクトには opener プロパティがあり、元のウィンドウは opener を通じて開くことができるため、2 つのウィンドウは相互に参照でき、互いのプロパティメソッドを読み取ることができます。窓と本体は同じです。
フォームは iframe によって作成されます。この要素には、独自の Window オブジェクトを参照する contentWindow 属性があり、Window オブジェクトには FrameElement 属性があります。Window オブジェクトがフォームを表す場合、frameElement は iframe 要素への参照です。以下の要素として
```
<iframe id = 'f1'></iframe>
var elt = document.getElementById('f1');
var win = elt.contentWindow;
win.frameElement === elt; //true
window.frameElement === elt; //false 对于顶级窗口来说永远是false
```
フォームやサブフォームを含むすべての Window オブジェクトには、frame プロパティがあります。Frames 属性は、フォームとそれに含まれるサブフォームの Window オブジェクトを参照します。frames は、これらの Window オブジェクトで構成される配列のようなオブジェクトで、最初のサブフォームを参照するなど、番号またはフォーム名によってインデックスを付けることができます。フォームフレーム[0]、2番目のサブフォームの3番目のサブフォームframes[1].frames[2]を参照、兄弟フォームparent.frames[1]を参照。
組み込みオブジェクトは、異なるウィンドウやフォーム間で独立しています。組み込みオブジェクトには、独自の独立したコンストラクターと、すべてのウィンドウフォームで自動的に事前定義されるプロトタイプオブジェクトのコピーがあります。カスタムオブジェクトは異なりますが、このオブジェクトのコンストラクターとそのプロトタイプは、相互に通信できるウィンドウとフォーム間で共有できます。ウィンドウに Set クラスが定義されており、子フォーム A と B がある場合は、親ウィンドウで次のようになります
。
```
var s = new Set(); String.toString = function(){return '内置对象';} （修改String的toString方法）
s.a === 1; //true
```
A:
```
var sa = new parent.Set(); parent.Set.prototype.a =1; （给自定义类Set的原型添加属性a，则所有能相互通信的窗口共享a）
var str = '测试';  str.toString; //测试  （调用的是窗体A自身的String对象的toString方法）
```
B の場合:
```
var Set = top.Set(); var sb = new Set(); sb.a === 1;  //true
```

ウィンドウ内でフォームを参照するには、次の構文を使用します。

frames[i] //当前窗口的框架
self.frames[i] //当前窗口的框架
w.frames[i] //窗口 w 的框架

フレームの親ウィンドウ (または親フレーム) を参照するには、次の構文を使用します。
```
parent //当前窗口的父窗口
self.parent //当前窗口的父窗口
w.parent //窗口 w 的父窗口
```
トップレベルウィンドウに含まれるフレームのいずれかから参照するには、次の構文を使用します。
```
top //当前框架的顶层窗口
self.top //当前框架的顶层窗口
f.top //框架 f 的顶层窗口
```

2.4 メッセージボックス（ポップアップウィンドウ、システムダイアログボックス）

alert() アラートボックス。これは、ユーザーが特定の情報を確実に取得できるようにするためによく使用されます。警告ボックスが表示された場合、ユーザーは [OK] ボタンをクリックして操作を続行する必要があります。
verify() 確認ボックス。ユーザー操作を受け付けるかどうかを確認するために使用されます。確認ボックスが表示された場合、ユーザーは「確認」または「キャンセル」をクリックしてユーザー操作を確認できます。「確認」をクリックすると、確認ボックスは true を返します。「キャンセル」をクリックすると、確認ボックスが false を返します
プロンプト() プロンプトボックス。これは、ページに入る前にユーザーに特定の値の入力を求めるためによく使用されます。プロンプトボックスが表示されたら、ユーザーは特定の値を入力し、操作を続行するには確認またはキャンセルボタンをクリックする必要があります。確認をクリックすると、その後、入力された値を返します。 cancel をクリックすると、null が返されます。

2.5 現在のビューポートサイズを取得する

innerWidth 現在のビューポートの幅を取得します (読み取り専用)

innerHeight 現在のビューポートの高さを取得します（読み取り専用）

ツールバー、メニューバー、システムバー、コンソールエリアは含まれません...スクロールバーは含まれます

IE8以下のブラウザバージョンには対応していないため、以下の方法で入手してください。

document.documentElement.clientWidth || document.body.clientWidth;
dowcument.documentElement.clientHeight || document.body.clientHeight;

IE6 以下は次の方法でのみdocument.body入手できます。

ブラウザの互換性

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

2.6 タイマー

setInterval(callbackfn, time) 断続的な呼び出し; 手動でクリアしない限り、指定された時間ごとに繰り返し操作を実行し、複数回呼び出します

setTimeout(callbackfn, time) 遅延呼び出し; 指定された時間の後に操作を 1 回だけ実行し、実行前にクリアできます

clearInterval(timer) は、指定された断続的な通話をクリアします。

clearTimeout(timer) は、指定された遅延呼び出しをクリアします。

var num = document.getElementById("num");
    var count = 0;
    var timer = window.setInterval(function(){
        if(count === 100){
            // 清除计时器
            clearInterval(timer)
        }
        num.innerHTML = count++ + "+";
},80);


window.setTimeout(function(){
    alert("不好意思，我打断一下！！")
},5000)
``

3、Navigator オブジェクト

Navigator オブジェクトのプロパティは次のとおりです。

属性	説明する
アプリコード名	ブラウザのコード名を返します。
アプリ名	ブラウザの名前を返します
アプリのバージョン	ブラウザのプラットフォームとバージョン情報を返します。
プラットホーム	ブラウザが実行されているオペレーティングシステムプラットフォームを返します。
ユーザーエージェント	クライアントからサーバーに送信されたユーザーエージェントヘッダーの値を返します。

3、画面オブジェクト

画面オブジェクトのプロパティは次のとおりです。

属性	説明する
利用可能な高さ	画面の高さを返します(Windowsタスクバーを除く)。
availWidth	画面の幅を返します(Windowsタスクバーを除く)。
色深度	ターゲットデバイスまたはバッファ上のパレットのビット深度を返します。
身長	画面の合計の高さを返します
ピクセル深度	画面の色の解像度 (ピクセルあたりのビット数) を返します。IE8 以下のブラウザはサポートされていません。
幅	画面の合計幅を返します

4、履歴オブジェクト

History オブジェクトのプロパティは次のとおりです。

属性	説明する
長さ	履歴リスト内の URL の数を返します。

History オブジェクトのメソッドは次のとおりです。

方法	説明する
戻る（）	履歴リストに前の URL をロードします。これはブラウザの戻る矢印に相当します。
フォワード（）	履歴リストに次の URL をロードします。これはブラウザの前向き矢印に相当します。
行く（）	履歴リストの特定のページをロードします

5、位置オブジェクト

Location オブジェクトのプロパティは次のとおりです。

属性	説明する
ハッシュ	URLのアンカー部分を返します。
ホスト	URL のホスト名とポートを返します。
ホスト名	URLのホスト名を返します
href	完全な URL を返します
パス名	URL パス名を返します。
ポート	URLサーバーが使用するポート番号を返します。
プロトコル	URL プロトコル (http https ftp およびその他のプロトコルなど) を返します。
検索	URLのクエリ部分を返します。

位置オブジェクトのメソッドは次のとおりです。

方法	説明する
割当（）	新しいドキュメントをロードする
リロード()	現在のドキュメントを再読み込みします。これはブラウザの更新ボタンに相当します。
交換する（）	現在のドキュメントを新しいドキュメントに置き換えます

添付のアドレスバー分析:

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが備わっている可能性があります。画像を保存して直接アップロードすることをお勧めします (img-jYjueXtA-1691110488436)(BOM Notes.assets/image-20210112161122731.png)]