关于javascript:关于在A页面操作B页面刷新数据这件事

这里是忽然怠惰的 Zhuo，继续更新文档中。

需要

“小 Z，你说能不能做到在 A 页面新增一个数据之后，B 页面也同步刷新，呈现方才新增的那个数据呢?”PO 对着我说。

“能够是能够，然而 …”我正筹备说。

“我就晓得你行，我这个版本有一个交互优化点，你来看看。”PO 满脸坏笑。

“….”

“纯前端能够实现，然而有局限。B 页面只能由 A 页面关上的，而且须要 B 页面反对一些性能，所以 B 页面最好是咱们零碎外部的。”我说

“这也行吧”PO

成果

剖析

计划比照

通过回调函数

1. 首先，在主页面的 window 上注册一个全局函数 callback；
2. 接着，从零碎中关上一个子页面 window.open(href, '_blank')；
3. 最初，通过子页面 window.opener.window.callback() 进行函数调用

先讲一下 window.opener： 返回关上以后窗口的那个窗口的援用，例如：在 window A 中关上了 window B，B.opener 返回 A；

这个计划的实现是利用了 window.opener 的个性，间接入侵到主页面中去做一个函数的调用。（都间接能获取到 window 了，想做点什么不行）

注：这个会导致一些平安的问题，如果零碎中跳转到一些不牢靠的第三方地址，那么它能够通过 window.opener 间接批改零碎的内容，解决这个问题只有把它的 opener 设置成空。

let page = window.open(href, '_blank')
page.opener = null

监听 localStorage

1. 一个窗口更新 localStorage，另一个窗口监听 window 对象的 storage 事件，来实现通信。

// 子页面设置
localStorage.setItem('page-event', Date.now())

// 主页面监听
window.addEventListener('storage', function (e) {// 去做一些其余的事})

注： 该形式须要两个窗口满足同源策略的条件。

WebSocket 服务

借助后盾起一个 socket 服务，让所有须要进行跨窗口通信的页面都开启一个 WebSocket 服务监听这个地址，利用 send 进行播送，其余页面监听该事件，这个计划不仅能跨窗口，还能跨浏览器。

let ws = new WebSocket('ws://localhost:3000/')
ws.onopen = function (event) {
      // 或者把此办法注册到其余事件中，即可与其余服务器通信
      ws.send({now : Date.now()}) // 通过服务器直达音讯
    
    ws.onmessage = function (event) {
          // 生产音讯
          console.log(event.data)
    }
}

message 事件

1. 首先，是从零碎中关上一个子页面 window.open(href, '_blank')：MDN；
2. 接着，在主页面监听 message 事件：MDN；
3. 最初，从子页面 postMessage 数据到主页面。

利用 message 实现会有一些限度和平安的问题，在 MDN 下面曾经有欠缺的解决办法了，大家间接参考它下面的就行了。

残缺实现：

<script lang="ts" setup>
import {ElButton} from 'element-plus';
import {ref} from 'vue';

let pageHandle = ref<Window>();
let message = ref<string>();

const openPage = () => {
    pageHandle.value =
        window.open('http://localhost:3000/', '_blank') ?? undefined;

    window?.addEventListener('message', event => {
        // 过滤掉非同域名下的信息
        if (event.origin === location.origin) {message.value = event.data;}
    });
};
const sendMessage = () => {
    window.postMessage(` 我已出仓，感觉良好。工夫：${Date.now()}`,
        location.href
    );
};
</script>

明天这个班就上到这里。