The window object is the top-level object in the browser environment, known as the global object, and other objects are within its jurisdiction. The objects in the BOM model and DOM that we are familiar with are also among them. Today, I mainly introduce some properties and methods of the window object.
| attribute name | value |
|---|---|
| window | , return window |
| self | return window |
| document | Returns the document associated with the window |
| name | Returns the name of the window. Can be set to change the name |
| location | Returns a location object with the current page location. Can be set to navigate to another page. |
| history | Returns the history object for this associated document |
| customElements | Defines a new custom element mapping the given name to the given constructor as an autonomous custom element |
| locationbar | The location bar property must return the location bar BarProp object |
| menu bar | The menu bar property must return the menu bar BarProp object |
| personalbar | The personal column property must return the personal column BarProp object |
| scrollbars | The scrollbar property must return the scrollbar "bar props" object |
| toolbar | The toolbar property must return the toolbar BarProp object |
| stateable | The status bar property must return the status bar BarProp object |
| fakeWorkerlet1 | return fakeWorkerlet1 object |
| fakeWorkerlet2 | return fakeWorkerlet2 object |
| sessionStorage | Returns the Storage object associated with the session storage area of the source where this window resides. Throws a "Security Error" domain exception if the origin of the document is an opaque origin, or if the request violates a policy decision (for example, if the user agent is configured not to allow the page to save data) |
| localStorage | Returns the Storage object associated with the local storage area of the window's origin. Throws a "Security Error" domain exception if the origin of the document is an opaque origin, or if the request violates a policy decision (for example, if the user agent is configured not to allow the page to save data). |
| close() | close the window |
| closed | Returns true if the window is closed, false otherwise |
| stop() | Cancel document loading |
| focus() | Move focus to the window's navigable, if any |
| blur() | Move focus into the viewport. Use of this method is discouraged; if you want to focus the viewport, call the focus() method on the document's document element. If you find the focus ring ugly, don't use this method to hide the focus ring. Instead, use the :focus-visible pseudo-class to override the "outline" property and provide a different way to display the focused element. Note that without another way to focus, the page will be significantly less usable for those who primarily use the keyboard to navigate the page, or those who use focus outlines to help them navigate the page. |
| frames | |
| length | Returns the number of document tree subnavigation objects |
| top | Returns the top-level traversable WindowProxy |
| opener | Returns the window proxy as the opener browsing context. Returns null if none or has been set to null. Can be set to empty |
| parent | Returns the WindowProxy of the parent navigable object |
| frameElement | Returns a navigable container element. Returns null if there is not one, and in case of cross-origin |
| open([url,target,features]) | Open a window to display the url (default is "about:blank"), and return it. The target (defaults to "_blank") gives the name of the new window. If a window with that name already exists, it will be reused. The feature parameter can contain a comma-parsed set of tokens |
| navigator | Every Window has an associated Navigator, which is a Navigator object. When a Window object is created, its associated navigation must be set to the new navigation object created in the relevant field of the Window object. The step of the navigator and the client information getter is to return this associated navigator. |
| clientInformation | Returns the navigator for this association |
| originAgentCluster | Returns true if this Window belongs to the original keyed broker cluster. |
| alert() | Show a modal alert with the given message and wait for the user to dismiss it. |
| alert(message) | Show a modal alert with the given message and wait for the user to dismiss it. |
| confirm([message]) | Displays a modal OK/Cancel prompt with the given message, waits for the user to cancel, returns true if the user clicks OK, returns false if the user clicks Cancel. |
| prompt([message,default]) | 显示包含给定消息的模式文本控件提示符，等待用户关闭它，并返回用户输入的值。如果用户取消了提示符，则返回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);
});