window オブジェクトは、グローバル オブジェクトと呼ばれるブラウザー環境の最上位オブジェクトであり、他のオブジェクトはその管轄内にあります。私たちがよく知っている BOM モデルと DOM のオブジェクトもその中にあります。今日は、window オブジェクトのプロパティとメソッドを中心に紹介します。
| 属性名 | 価値 |
|---|---|
| 窓 | 、返品窓口 |
| 自己 | 返却窓口 |
| 書類 | ウィンドウに関連付けられたドキュメントを返します |
| 名前 | ウィンドウの名前を返します。名前を変更するように設定できます |
| 位置 | 現在のページの場所を含む場所オブジェクトを返します。別のページに移動するように設定できます。 |
| 歴史 | この関連付けられたドキュメントの履歴オブジェクトを返します |
| カスタム要素 | 指定された名前を指定されたコンストラクターに自律的なカスタム要素としてマッピングする新しいカスタム要素を定義します |
| ロケーションバー | ロケーション バーのプロパティは、ロケーション バーの BarProp オブジェクトを返す必要があります |
| メニューバー | メニュー バーのプロパティは、メニュー バーの BarProp オブジェクトを返す必要があります |
| パーソナルバー | パーソナル列プロパティは、パーソナル列 BarProp オブジェクトを返す必要があります |
| スクロールバー | スクロールバーのプロパティは、スクロールバーの「バーの小道具」オブジェクトを返す必要があります |
| ツールバー | ツールバー プロパティはツールバー BarProp オブジェクトを返さなければなりません |
| 言明可能な | ステータス バー プロパティはステータス バー BarProp オブジェクトを返す必要があります |
| 偽のWorkerlet1 | fakeWorkerlet1 オブジェクトを返す |
| 偽のWorkerlet2 | fakeWorkerlet2 オブジェクトを返す |
| セッションストレージ | このウィンドウが存在するソースのセッション ストレージ領域に関連付けられた Storage オブジェクトを返します。ドキュメントのオリジンが不透明なオリジンである場合、またはリクエストがポリシーの決定に違反している場合 (たとえば、ページがデータを保存することを許可しないようにユーザー エージェントが構成されている場合) は、「セキュリティ エラー」ドメイン例外をスローします。 |
| ローカルストレージ | ウィンドウの起点のローカル ストレージ領域に関連付けられた Storage オブジェクトを返します。ドキュメントのオリジンが不透明なオリジンである場合、またはリクエストがポリシーの決定に違反している場合 (たとえば、ページがデータを保存することを許可しないようにユーザー エージェントが構成されている場合) は、「セキュリティ エラー」ドメイン例外をスローします。 |
| 近い（） | 窓を閉めて |
| 閉まっている | ウィンドウが閉じている場合は true、そうでない場合は false を返します |
| ストップ（） | ドキュメントの読み込みをキャンセル |
| 集中（） | ウィンドウのナビゲート可能なものにフォーカスを移動します (存在する場合) |
| ぼかし() | フォーカスをビューポートに移動します。このメソッドの使用はお勧めできません。ビューポートをフォーカスしたい場合は、ドキュメントのドキュメント要素で focus() メソッドを呼び出してください。フォーカス リングが見苦しい場合は、この方法を使用してフォーカス リングを非表示にしないでください。代わりに、:focus-visible 疑似クラスを使用して「outline」プロパティをオーバーライドし、フォーカスされた要素を表示する別の方法を提供します。フォーカスする別の方法がないと、主にキーボードを使用してページをナビゲートするユーザーや、フォーカス アウトラインを使用してページをナビゲートするユーザーにとって、ページの使いやすさが大幅に低下することに注意してください。 |
| フレーム | |
| 長さ | ドキュメント ツリー サブナビゲーション オブジェクトの数を返します |
| 上 | トップレベルのトラバース可能な WindowProxy を返します |
| オープナー | オープナー ブラウジング コンテキストとしてウィンドウ プロキシを返します。何もない場合、または null に設定されている場合は null を返します。空に設定できます |
| 親 | 親のナビゲート可能なオブジェクトの WindowProxy を返します |
| フレーム要素 | ナビゲート可能なコンテナ要素を返します。存在しない場合、およびクロスオリジンの場合は null を返します |
| open([URL,ターゲット,機能]) | ウィンドウを開いて URL を表示し (デフォルトは「about:blank」)、それを返します。ターゲット (デフォルトは "_blank") は、新しいウィンドウの名前を指定します。その名前のウィンドウが既に存在する場合は、それが再利用されます。機能パラメーターには、カンマで解析された一連のトークンを含めることができます |
| ナビゲーター | すべての Window には、Navigator オブジェクトである関連付けられた Navigator があります。Window オブジェクトが作成されると、それに関連付けられたナビゲーションは、Window オブジェクトの関連フィールドで作成された新しいナビゲーション オブジェクトに設定する必要があります. ナビゲーターとクライアント情報ゲッターのステップは、この関連付けられたナビゲーターを返すことです. |
| クライアント情報 | この関連付けのナビゲーターを返します |
| originAgentCluster | この Window が元のキー付きブローカー クラスターに属している場合は true を返します。 |
| アラート() | 指定されたメッセージでモーダル アラートを表示し、ユーザーがそれを閉じるのを待ちます。 |
| アラート（メッセージ） | 指定されたメッセージでモーダル アラートを表示し、ユーザーがそれを閉じるのを待ちます。 |
| 確認([メッセージ]) | 指定されたメッセージとともにモーダル OK/キャンセル プロンプトを表示し、ユーザーがキャンセルするのを待ち、ユーザーが [OK] をクリックすると true を返し、ユーザーが [キャンセル] をクリックすると false を返します。 |
| prompt([メッセージ,デフォルト]) | 显示包含给定消息的模式文本控件提示符，等待用户关闭它，并返回用户输入的值。如果用户取消了提示符，则返回null。如果存在第二个参数，则将给定的值用作默认值。 |
| print() | 提示用户打印该页面。 |
| postMessage(message,targetOrigin[,transfer]) | 这是postMessage()的一个替代版本，其中目标原点被指定为一个参数。调用window.postMessage（消息、目标、传输）相当于window.postMessage（消息、{目标起源、传输}） |
| postMessage(message[options]) | 发布一个到给定窗口的消息。消息可以是结构化对象，例如嵌套对象和数组，可以包含JavaScript值（字符串、数字、日期对象等），并可以包含某些数据对象，如文件块、文件列表和排列缓冲区对象。在选项的转移成员中列出的对象将被转移，而不仅仅是克隆，这意味着它们在发送端不再可用。可以使用选项中的目标起源成员来指定目标原点。如果没有提供，则默认为“/”。此默认值仅将消息限制为同一源目标。如果目标窗口的原点与给定的目标原点不匹配，则丢弃该消息，以避免信息泄漏。要将消息发送到目标，而不管原点如何，请将目标原点设置为“*”。如果传输数组包含重复的对象或消息无法被克隆时，将抛出一个“数据克隆错误”的域异常 |
| setTimeout(handler[, timeout [, …arguments ] ]) | 在超时毫秒后运行处理程序。任何参数都将直接传递给处理程序。该函数返回一个id |
| clearTimeout(id) | 使用由id标识的setTimeout()或setInterval()取消超时设置 |
| setInterval(handler [, timeout [, …arguments ] ]) | 每一个超时毫秒调度一个超时以运行处理程序。任何参数都将直接传递给处理程序。该函数返回一个id |
| clearInterval(id) | 取消setInterval()或setTimeout()的超时。 |
以上就是window的常用属性和方法。
示例
使用open()和postMessage进行页面间的通信。
在A页面中通过open() 打开另一个页面，然后会得到一个被打开页面的引用，使用这个引用调用postMessage()方法在另一个页面就能接收到消息。
<button id="btn">点击发送消息</button>
let btn = document.getElementById('btn');
let opener = window.open('./location.html');
btn.addEventListener('click', function(){
opener.postMessage('hello');
});
在被打开的页面中监听message事件，该事件会在发送消息时触发，即调用postMessage()方法。我们可以通过e.data获取到发送的具体内容。
window.addEventListener('message',function (e){
console.log(e,e.data);
});