all
window.alert()
window.blur()
window.cancelIdleCallback()
window.clearImmediate()
window.close()
window.confirm()
window.focus()
window.getComputedStyle()
window.getComputedStyle() 方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。 私有的 CSS 属性值可以通过对象提供的 API 或通过简单地使用 CSS 属性名称进行索引来访问。
语法
let style = window.getComputedStyle(element, [pseudoElt]);
-
element: 用于获取计算样式的
Element -
pseudoElt: 指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）
返回值
返回的 style 是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。style 对象如下:
-
属性
-
方法
-
style.getPropertyPriority(): 返回可选的优先级，"important"
-
style.getPropertyValue(): 返回给定属性的值
-
style.item(): 返回用 index 标记的属性名，当 index 越界时返回空字符串。
-
style.removeProperty(): 从 CSS 声明块中删除属性。
-
style.setProperty(): 在 CSS 声明块中修改现有属性或设置新属性。
-
场景
-
场景一、获取 DOM 元素样式
<div id="box" style="width: 100px; height: 100px"></div>
<script>
const box = document.getElementById("box");
const styles = window.getComputedStyle(box);
console.log(styles); // CSSStyleDeclaration 对象
const height = styles.getPropertyValue('height');
console.log(height); // 100px
</script>
window.getDefaultComputedStyle()
window.getSelection()
window.getSelection() 返回一 个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
语法
const selection = window.getSelection() ;
返回值
selection: 是一个 Selection 对象。如果想要将 selection 转换为字符串，可通过连接一个空字符串（""）或使用 String.toString() 方法。
场景:
-
场景一、获取
blur之后的获焦元素input.onblur = function(){
const selection = window.getSelection();
console.log("失焦后的获焦元素为:"+selection)
};
window.matchMedia()
window.moveBy()
window.moveTo
window.open()
Window接口的open()方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。window.open() 创建一个新的浏览器窗口对象。 远程URL对象不会立即载入，载入过程是异步的。
语法
let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
-
strUrl: 新窗口需要载入的url地址。strUrl可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。 -
strWindowName: 新窗口的名称。该字符串可以用来作为超链接<a>或表单<form>元素的目标属性值。字符串中不能含有空白字符。-
_self: 当前页面加载 -
_blank: 新窗口打开 -
_parent: 加载响应到当前框架的父框架或当前的浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与_self相同。 -
_top: 加载的响应成完整的，原来的窗口，取消所有其他frame。HTML5 中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
-
-
strWindowFeatures: 可选参数。是一个字符串值，这个值列出了将要打开的窗口的一些特性(窗口功能和工具栏) 。 字符串中不能包含任何空白字符，特性之间用逗号分隔开。
返回值:
- windowObjectReference: 打开的新窗口对象的引用。如果调用失败，返回值会是 null 。如果父子窗口满足“同源策略”，你可以通过这个引用访问新窗口的属性或方法。
场景
-
场景一、页面跳转（新建页面）
jump(){
window.open('www.baidu.com','_blank');
}
window.postMessage()
**window.postMessage()**可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
-
otherWindow: 其他窗口的一个引用-
Iframe:Iframe.contentWindow.postMessage -
window.frames:window.frames[i].postMessage -
window.open返回的窗口对象:openObj.postMessage
-
-
message: 将要发送到其他window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。 -
targetOrigin: 通过窗口的origin属性来指定哪些窗口能接收到消息事件-
*: 无限制,不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。 -
targetOrigin: 具有协议、主机地址、端口号的URI。如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。
-
-
transfer: 是一串和message同时传递的Transferable对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
场景
-
场景一、浏览器两个
Tab通信-
A Tab页面- Html
- Css
- JavaScript
<h2>A 页面</h2>
<button>跳转 B 页面</button><div className="box">
<div className="item"></div>
</div>const targetOrigin = "http://test.bolawen.com/b.html";
const button = document.querySelector("button");
button.addEventListener(
"click",
function () {
const BPage = window.open(targetOrigin,"_blank");
BPage.addEventListener("load", function () {
BPage.postMessage("aa", targetOrigin);
});
},
false
);
function receiveMessage(e) {
const { data,origin,source} = e;
if(origin === targetOrigin){
console.log("A 页面发送数据之后的回调数据",data);
}
console.log("A 页面接收的数据",data);
}
window.addEventListener("message", receiveMessage, true); -
B Tab页面- Html
- Css
- JavaScript
<h2>B 页面</h2>function receiveMessage(e) {
const { data, origin, source } = e;
console.log("B 页面接收到的数据", data);
source.postMessage("bb", origin);
}
window.addEventListener("message", receiveMessage);
-
-
场景二、浏览器中
Iframe通信-
A页面- Html
- Css
- JavaScript
<h2>A 页面</h2>
<iframe src="./b.html"></iframe>const targetOrigin = "*";
const iframePage = document.querySelector("iframe[src='./b.html']");
iframePage.addEventListener("load", function () {
iframePage.contentWindow.postMessage("aa", targetOrigin);
});
function receiveMessage(e) {
const { data, origin, source } = e;
if (origin === targetOrigin) {
console.log("A 页面发送数据之后的回调数据", data);
}
console.log("A 页面接收的数据", data);
}
window.addEventListener("message", receiveMessage, true); -
B Iframe页面- Html
- Css
- JavaScript
<h2>B 页面</h2>function receiveMessage(e) {
const { data, origin, source } = e;
console.log("B 页面接收到的数据", data);
const targetOrigin = origin && origin !== "null" ? origin : "*";
source.postMessage("bb", targetOrigin);
}
window.addEventListener("message", receiveMessage);
-
window.print()
window.prompt()
window.requestIdleCallback()
window.resizeBy()
window.resizeTo()
window.scroll()
window.scroll() 滚动窗口至文档中的特定位置。
语法
window.scroll(x,y);
window.scroll({
top: value,
left: value,
behavior: "smooth" | "auto", // smooth 表示平滑滚动并产生过渡效果, auto 或缺省值会直接跳转到目标位置，没有过渡效果。
})
window.scrollBy()
window.scrollBy() 在窗口中按指定的偏移量滚动文档。
语法
window.scrollBy(x,y);
window.scrollBy({
top: value,
left: value,
behavior: "smooth" | "auto", // smooth 表示平滑滚动并产生过渡效果, auto 或缺省值会直接跳转到目标位置，没有过渡效果。
})
window.scrollTo()
window.scrollTo() 滚动到文档中的某个坐标。
语法
window.scrollTo(x,y);
window.scrollTo({
top: value,
left: value,
behavior: "smooth" | "auto", // smooth 表示平滑滚动并产生过渡效果, auto 或缺省值会直接跳转到目标位置，没有过渡效果。
})