各位看官如果觉得此文对自己有些帮助，可以动动小手点个赞，加快我创作进度哦，赠人玫瑰手有余香，谢谢。 ## 1.window - 一个全局对象，全局变量和属性均是它的属性 - 包含 DOM 文档的窗口，表示浏览器窗口和页面可见区域 ### window.isSecureContext - 一个布尔值，标识当前上下文是否安全，安全( true )或不安全( false )，浏览器一些特性只能在安全上下文执行 - 该 API 一个重要表现就是网页是不是 https 协议 - 比如安全的： https://www.test.com，不安全的： http://www.test.com - 不安全的情况：https://w3c.github.io/webappsec-secure-contexts 有些特殊情况也被认为是安全的，主要是为了本地的开发 - http://127.0.0.1 http://localhost - http://*.localhost地址(比如：http://dev.whatever.localhost/地址 ) - file://url ### window.open() - 可以打开一个指定地址的新窗口 - 返回打开的新窗口对象的引用 - 注意:如果是同源，可以直接调用新窗口的方法语法： ```planText let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]); strUrl: url地址 strWindowName: 新窗口的名称 strWindowFeatures：可选值，定义将要打开的窗口的一些特性（工具栏、位置） ``` 点击打开新窗口开启新窗口，点击关闭可以关闭新窗口 ```html

``` 同源可以互相调用其窗口的方法父窗口： ```html

父窗口

``` 子窗口： ```html

子窗口

``` 操作演示： ![window.open](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e0ddb8d8a02488989825a1f4b5f1153~tplv-k3u1fbpfcp-zoom-1.image) ### 窗体可见性 #### document.hidden - 返回布尔值，表示页面是（true）否（false）隐藏 #### document.visibilityState - 返回document的可见性，由此可以知道当前页面显示隐藏和正在渲染 - 可选值："visible"、"hidden" 、 "prerender" 还有一个可搭配的事件 visibilitychange 监听当前窗口可见性是否更改代码演示： ```html ``` ### 滚动方法 | 方法名 | 作用 | 拥有此方法的对象 | | -------------- | ---------------- | ---------------- | | scroll | 滚动到指定的位置 | Window, Element | | scrollTo | 滚动到指定的位置 | Window, Element | | scrollBy | 滚动指定的偏移量 | Window, Element | | scrolllnfoView | 滚动到可视区 | Element | 除此之外还有一些方法 - 设置scrollTop、scrollLeft等 - 设置锚点 ### window.matchMedia() - 可被用于判定 Document 是否匹配媒体查询 - 监控一个 document 来判定它匹配了或者停止匹配了此媒体查询 ```html

(min-width: 600px):

``` ### window.getSelection() - 等价方法：Document.getSelection() - 表示用户选择的文本范围或光标的当前位置 - 可使用 Document.activeElement 来返回当前的焦点元素 ```html

云牧是个大帅锅

选中的内容：

``` ### window.frameElement() - 定义∶返回嵌入当前window对象的元素(比如` ``` `ifr1.html` ```html iframe 1 ``` `ifr2.html` ```html iframe 2 ``` ### 网络状态 - navigator.onLine ```html

``` ### window.print打印 - 打开打印对话框打印当前文档使用媒体查询，在浏览器打印的时候设置一些特殊样式 ```css @media print { .content1 { color: green; font-size:18px } } @import url("print.css") print; ``` 实现一个案例：打印的时候隐藏按钮和一些文字 ```html

云牧大帅锅

云牧小帅锅

``` ## 2.不同窗口间如何传递消息 ### 1.WebSocket - 思路:引入第三者进行中转 - 缺点∶需要引入服务端 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca0d0e746a4b452ab4b4ed110a453f10~tplv-k3u1fbpfcp-zoom-1.image) ### 2.定时器＋客户端存储 - 思路:本地存储＋本地轮询本地存储的方式 - cookie - localStorage/sessionStorage - indexDB - chrome的FileSystem `index.html` iframe引入两个页面 ```html

``` `page1.html` ```html

Page 1

收到的消息：

``` `page2.html` ```html

Page 2

收到的消息：

``` ![setInterval](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07a77fa6b611473db1e415f7316918bc~tplv-k3u1fbpfcp-zoom-1.image) ### 3.postMessage - 思路：用某种手段建立窗口间的联系，通过 postMessage 进行跨窗体通讯 - 优点：不受同源策略的限制 `index.html` ```html

index.html

Message:

``` `ifr.html` ```html ifr.html

Message:

``` ![postMessage](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c90ed220642422080aab66b48f9be77~tplv-k3u1fbpfcp-zoom-1.image) ### 4.storage `index.html` ```html ``` 其他页面 ```html

消息:

``` 上面 index 页面自身无法监测 storage 事件来感知修改，我们需要拦截重写一下对应的设置方法 ```html ``` ![storage](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d414e6939d7444b982b977a7567b242c~tplv-k3u1fbpfcp-zoom-1.image) ### 5.Broadcast Channel - 允许同源的不同浏览器窗口，Tab页，frame或者 iframe 下的不同文档之间相互通信 - 缺点：需要同源 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/523063f652b34bd69d45463de5e50d43~tplv-k3u1fbpfcp-zoom-1.image) `index.html` ```html

``` `page1.html` ```html

Page 1

收到的消息：

``` `page2.html` ```html

Page 2

收到的消息：

``` ### 6.MessageChannel - Channel Messaging API的 MessageChannel 接口允许我们创建一个新的消息通道，并通过它的两个MessagePort属性发送数据 - 缺点：需要先建立联系 - 此方式有点别扭 `index.html` ```html

index.html

Message:

``` `ifr.html` ```html ifr.html

Message:

``` ### 7.SharedWorker - 这是 Web Worker 之后出来的共享的Worker，不同页面可以共享这个Worker - 缺点∶兼容性、同源策略 `index.html` ```html

``` `page1.html` ```html

Page 1

收到的消息：

``` `page2.html` ```html

Page 2

收到的消息：

``` `worker.js` ```js let portList = []; onconnect = function (e) { let port = e.ports[0]; ensurePorts(port); port.onmessage = function (e) { let data = e.data; disptach(port, data); }; port.start(); }; function ensurePorts(port) { if (portList.indexOf(port) < 0) { portList.push(port); } } function disptach(selfPort, data) { portList.filter((port) => selfPort !== port).forEach((port) => port.postMessage(data)); } ``` ![SharedWorker](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44f4dee16b7148d6a5eeba308ec43a72~tplv-k3u1fbpfcp-zoom-1.image) ### 总结 | 方法方式 | 是否需要有强关联 | 遵守同源策略 | web worker可用 | | ------------------ | ---------------- | ------------ | ----------------- | | WebScoket | | | √ | | 定时器＋客户端存储 | | √ | indexedDB | | postMessage | √ | | 自己的postMessage | | StorageEvent | | √ | × | | Broadcast Channel | | √ | √ | | MessageChannel | √ | | √ | | SharedWorker | | √ | √ | ## 3.location ### url - host 包含端口号，hostname 返回域名 - 没有端口号的 url，host 和 hostname 相同 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2152674a541743f99a25975a775a3f2b~tplv-k3u1fbpfcp-zoom-1.image) ### 修改 location 属性值 - 可使用 location 对应属性替换地址栏对应的值 - 注意：location.origin属性是只读的，存在兼容问题（IE11以下不存在） - 除hash，修改其他属性值改都会以新 URL 重新加载，并会生成一条新的历史记录在浏览器中 - 修改 pathtname 可以不用传开头/，修改 search 可以不用传？，修改 hash 可以不用传# ```js window.location.protocol = "https"; window.location.host = "127.0.0.1:5500"; window.location.hostname = "127.0.0.1"; window.location.port = "5500"; window.location.pathname = "test/path"; window.location.search = "wd=ff"; window.location.hash = "/home"; window.location.href = "http://127.0.0.1:5500/liveSeverTest.html"; ``` ### 访问 location对象方式 - window.location - document.location - window.document.location - location（不推荐） ```js console.log(window.location); console.log(window.document.location); console.log(document.location); console.log(location); ``` ### window.location.reload - 定义：重新加载当前文档 - 参数: false或者不传，浏览器可能从缓存中读取页面 - 参数:true，强制从服务器重新下载文档 ### assign VS href VS replace | 属性/方法名 | 增加新纪录 | | ----------- | ---------- | | href | ✔ | | assign | ✔ | | replace | | ```html

``` ### window.location.href VS window.open - window.location.href是用新的域名页调换当前页，不会开新窗口 - window.open用来打开新窗口或者查找已命名的窗口，打开新窗口可能会被浏览器拦截 ### hash监听方式 - `window.onhashchange = funcRef` - `window.addEventListener("hashchange", funcRef, false)` ```html ``` ### 动态执行脚本 ```html

``` ### URL.searchParams ```js const urlObj = new URL(window.location.href); function getQueryString(key) { // 获取地址栏的查询字符串 return urlObj.searchParams.get(key); } ``` 其他方法属性： - keys() 返回iterator，此对象包含所有搜索的键名 - values() 返回iterator,此对象包含所有的value - entries() 返回一个iterator，可以遍历所有的键值对的对象 - set() 设置一个搜索参数新值，原来有多个值将删除其他所有值 - get() 获取指定搜索参数的值 - has() 判断是否有指定的搜索参数 - getAll() 获取指定搜索参数的所有值，返回一个数组 - delete() 从搜索参数列表里删除指定的键和值 - append() 插入一个指定的键/值 - toString() 返回搜索参数组成的字符串 - sort() 按键名排序 ### encodeURL 和 encodeURLComponent - 都是编码URL，唯一的区别在于编码的字符范围不同，encodeURLComponent相对更广 ```js const test1 = ";,/?:@&=+$"; // 保留字符 const test2 = "-_.!~*'()"; // 不转义字符 const test3 = "#"; // 数字标志 const test4 = "ABC abc 123"; // 字母数字字符和空格 console.log("-----------encodeURI------------"); console.log(encodeURI(test1)); console.log(encodeURI(test2)); console.log(encodeURI(test3)); console.log(encodeURI(test4)); console.log("-----------encodeURIComponent------------"); console.log(encodeURIComponent(test1)); console.log(encodeURIComponent(test2)); console.log(encodeURIComponent(test3)); console.log(encodeURIComponent(test4)); ``` 执行结果如下： ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77170f4f8b584cb59aa08200b3ebcc61~tplv-k3u1fbpfcp-zoom-1.image) - 使用场景： - 如果要编码整个URL，使用encodeURL - 如果要编码 URL 中的后面的参数，使用 encodeURLComponent 最好例如 https://www.baidu.com/index.html?go=abc - https://www.baidu.com/index.html 使用 encodeURL - go 和 abc 都可以使用 encodeURLComponent ## 4.navigator（不至于识别设备） ### navigator.userAgent - 识别是否微信内置浏览器 ```js //android //mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) version/4.0 mobile safari/534.30 micromessenger/5.0.1.352 //ios //mozilla/5.0 (iphone; cpu iphone os 5_1_1 like mac os x) applewebkit/534.46 (khtml, like gecko) mobile/9b206 micromessenger/5.0 function isWX() { const ua = window.navigator.userAgent.toLowerCase(); return ua.match(/MicroMessenger/i) == "micromessenger"; } if ("serviceWorker" in navigator) { // Supported! } ``` - 解析userAgent的库 : `ua-parser-js` ### navigator.onLine(在线状态) - 返回 true | false 表示浏览器的在线状态 - 使用：结合 document.ononline 与 document.onoffline 网络变化 ```html

``` ### navigator.clipboard(剪切板) - 返回剪切板对象 - 注意∶必须是安全上下文（local，https，wss ) - 注意：window.isSecureContext 检测安全上下文 ```html ``` ### navigator.cookieEnabled(cookie) - 返回当前页面是否启用了cookie ### navigator.serviceWorker(Service Worker) - 返回关联文件的 ServiceWorkerContainer 对象，提供对 ServiceWorker 的注册，删除，升级和通信访问 - 只能在安全上下文使用应用场景： - 后台数据同步 - 集中处理计算成本高的数据更新 - 性能增强，用于预获取用户需要的资源 ### navigator.mediaDevices（媒体设备） - 返回一个MdeiaDevices对象，用户获取媒体信息设备 - 应用场景：H5调用摄像头识别二维码，共享屏幕等获取媒体设备 ```js if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) { navigator.mediaDevices .enumerateDevices() .then(function (devices) { console.log("devices==", devices); }) .catch(function (err) { console.log(err.name + ": " + err.message); }); } ``` 共享媒体使用 ```html

``` ### navigator.storage(存储) - 返回 StorageManager 对象，用于访问浏览器的整体存储能力 - 注意∶必须安全上下文 - 应用：获取 storage 的存储大小以及可分配大小 ```js navigator.storage.estimate().then(function (estimate) { console.log("使用:", estimate.usage); console.log("总量:", estimate.quota); }); ``` navigator.sendBeacon（上报数据） - 作用：通过 httpPost 将少量的数据异步传输到web服务器 - 应用：它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如:XMLHttpRequest ）发送分析数据的一些问题客户端代码： ```js function log() { let xhr = new XMLHttpRequest(); xhr.open("post", "http://127.0.0.1:3000/report/xhr", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("xhr=1"); } function sendBeacon() { const data = new FormData(); data.append("sendB", 2); navigator.sendBeacon("http://127.0.0.1:3000/report/bean", data); } window.addEventListener("unload", function (event) { sendBeacon(); }); window.addEventListener("unload", function (event) { log(); }); ``` 服务端代码： ```js const express = require("express"); const app = express(); app.use("/report/xhr", function (req, res, next) { console.log("收到上报请求, from xhr"); }); app.use("/report/bean", function (req, res, next) { console.log("收到上报请求, from bean"); }); app.listen(3000, function () { console.log("listening port 3000"); }); ``` ### navigator.connection（网络信息）-- 实验 - 返回一个NetworkInformation 对象，其包含网络信息 - 应用：获取当前用户的宽带信息，如网络类型，下载速度等 ### navigator.permissions（权限对象）-- 实验 - 返回一个 Permissions 对象 - 应用：获取权限信息 ```html ``` ### navigator.mediaSession（共享媒体信息）-- 实验 - 返回一个 MediaSeeion 对象，用来与浏览器共享媒体信息。比如播放状态，标题，封面等 - 应用：通知栏自定义媒体信息 ## 5.history ，网页端的方向盘 ### 历史记录本质也是一个栈 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7e90308a71d04867aeb7027b097f928f~tplv-k3u1fbpfcp-zoom-1.image) ### 旧四样 | API | 说明 | | --------------- | ------------------------ | | history.back | 向后移动一页 | | history.forward | 向前移动一页 | | history.go | 向前或者向后移动指定页数 | | history.length | 当前会话中的历史页面数 | #### back & forward & length - back：会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作 - forward：在会话历史中向前移动一页。如果没有下一页，则此方法调用不执行任何操作 - length：返回当前会话中的历史页面数，包含当前页面在内。对于新开一个 tab 加载的页面当前属性返回值 #### go - 在会话历史中向前或者向后移动指定页数 - 负值表示向后移动，正值表示向前移动 - 如果未向该函数传参或等于0，则该函数与调用 location.reload() 具有相同的效果 - 如果需要移动的页面数，大于可以移动的页面数，不进行任何移动 ```html

当前:首页

去page1.html
去page2.html
去page3.html

历史记录长度:

``` ### 新四样 | API | 说明 | | -------------------- | ---------------------------------------------- | | history.pushState | 向当前浏览器会话的历史堆栈中添加一个状态 | | history.replacestate | 修改当前历史记录状态 | | history.state | 返回在会话栈页的状态值的拷贝 | | window.onpopstate | 当活动历史记录条目更改时，将触发 popstate 事件 | #### history.pushState - 语法： history.pushState(state, title[, url]) - 其会增加历史访问记录（即使url为空)，但不会改变页面的内容 - **改变的新的 URL 跟当前的 URL 必须是同源** #### history.replacestate - 语法：history.replaceState(stateObj, title,[url]) - **是替换浏览记录栈顶部的记录，不会增加栈的深度** - 新的URL跟当前的URL必须是同源 #### window.onpopstate - 当活动历史记录条目更改时，将触发 popstate 事件 - 调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件 - popstate事件只会在浏览器某些行为下触发，比如点击后退、前进按钮(或者在 JavaScript 中调用history.back()、history.forward()、history.go()方法) - a标签的锚点也会触发该事件 ```html

state:

历史记录长度:

#index

``` - 刷新的时候需要与服务端配合 - 方案：不管我们访问路由是否，服务端都返回同一份index.html ```js const express = require("express"); const path = require("path"); const app = express(); app.get("*", function (req, res, next) { res.sendFile(path.join(__dirname, "./static/index.html")); }); app.listen(8086, function () { console.log("listening on port 8086"); }); ```