这里是突然勤快的卓，不断更新文档。需求“小Z，你能说在A页面添加一条新数据后，B页面也同步刷新，从而出现新添加的数据吗？”PO对我说。“是的是的，但是……”我正要说。“我就知道你可以，我这个版本有交互优化点，你可以看看。”PO脸上露出了得意的笑容。“……”“可以实现一个纯前端，但是有局限性。B页面只能被A页面打开，B页面需要支持一些功能，所以B页面最好在我们系统内部。”我说“这个可以”。PO效果分析方案对比方案优缺点备注回调函数简单粗暴1.需要主页面的全局注册功能，不利于扩展2.依赖opener一旦设置为空在主页面上，获取不到任何内容，监听localStorage满足基本要求，需要两个页面都满足同源策略条件WebSocket服务1，不仅是跨窗口，还可以跨浏览器，甚至是跨账号1.需要服务器端参与2.所有页面都会收到事件消息事件1.页面不需要同源2.只要传递的信息约定好，即使是不同的系统也可以通信1..不同系统之间传递的内容需要通过回调函数约定，首先在主页面的window上注册一个全局回调函数；然后打开一个子页面window.open(href,'_blank')f从系统；最后，通过子页面window.opener.window.callback()进行函数调用先说window.opener：返回打开当前窗口的那个窗口的引用，例如：窗口B在窗口A中打开，B.opener返回A；本方案的实现是利用window.opener的特性，直接侵入主页面进行函数调用。（可以直接获取window，想做也做不了）注意：这样会造成一些安全问题。如果系统跳转到一些不靠谱的第三方地址，那么可以直接修改系统通过window.opener的内容，解决这个问题只需将其opener设置为空即可。letpage=window.open(href,'_blank')page.opener=null监听localStorage一个窗口更新localStorage，另一个窗口监听window对象的存储事件，实现通信。//子页面设置localStorage.setItem('page-event',Date.now())//主页面监听window.addEventListener('storage',function(e){//做一些其他事情})注意：这个方法要求两个窗口都满足同源策略的条件。WebSocket服务借助后台的一个socket服务，让所有需要跨窗口通信的页面都开启一个WebSocket服务监听这个地址，使用send进行广播，其他页面监听事件。这个方案不仅可以跨窗口，还可以跨浏览器。letws=newWebSocket('ws://localhost:3000/')ws.onopen=function(event){//或者在其他事件中注册此方法，与其他服务器通信ws.send({now:Date.now()})//通过服务器发送消息ws.onmessage=function(event){//消费消息console.log(event.data)}}messageevent首先从系统打开一个子页面窗口.open(href,'_blank'):MDN;然后，在主页面监听消息事件：MDN；最后，将子页面的postMessage数据发送到主页面。使用消息时存在一些限制和安全问题。MDN上已经有完善的解决方案，大家可以参考一下。完整的实现：到此结束今天的课。
