跨窗口与标签页的通信互传机制

在各类应用的前端环境中,开发人员需要对跨窗口结构(包括不同标签页打开、或者在多层深层关联展现页里构建多功能呈现体系)提供有效准确的交互状态维护交互同步技术方案。针对各种层次源规则存在主要区分情况:

1. 同源窗口间通信体系

若所有需求联动作用发生的各个开启视图窗口都部署于同等限制域(一致保证协议,基础层,对应主干源口一致下)。通常选用:

(1) LocalStorage 事件回调监控

如果不同网页视图需要互相更新应用基础设定层的数据操作变更记录:通过在修改源处应用 localStorage.setItem 更新调整后,其他标签依靠绑定挂靠着的关联监听函数 window.addEventListener('storage', ...) 可以被同时告知此条触发信息传递进行对应调整变化反应展现。缺点是不便于大数据复杂体系长驻的交换使用,易与系统缓存记录混合造成硬盘交互读取过多响应压力损耗拖拉延迟问题发生影响。

(2) BroadcastChannel 原生专线交互功能

使用原生提供频道发布消息频道支持组件。同源视图分别直接建立相同的同层命名如:new BroadcastChannel('sync-info') 。相互间通过简单配置即用挂件直接产生触发监听信息响应传动能力使用和调起执行过程即可完成多界层数据处理操作通知交换目的。性能良好轻操作负重传递简易稳定。

2. 跨层域与深隔离交互机制

出现需联调页面处在彻底无关并且处于不可跨越基础安全壁垒阻隔状况时(包含非同源 iframe 互相套接应用操作结构),应规范选用:

(1) 交互传包处理准则

以调用 window.postMessage 进行脱脱离独立环境传递特定授权打包信号数据处理体系来进行。利用特定的收发体系向指定的环境指针传送包含所需反馈操作的反馈内容结果对象。

(2) 必须防范安全盲点要项

在使用对应方式搭建过程里有着关键配置属性需求。 发派应用过程:应当在进行派送触发声明时严谨核对输入准确被派受众实际应用运行源环境。而不是因为减少调试难度简单给出 * 对应模糊授权判定指令以免将隐私凭证操作过程发生到不确定应用。 监听过程:第一接手时刻同样不可单纯采纳传递的携带业务请求对象,而是对于事件参数主体提供的验证标示值判定符合业务合作域才交接内应用运作。

3. 并连独立服务后台节点支持运转方式

除了运用前端层级特供通信对象组件的支撑选择以外同样亦可在运用需要同源支持前提应用背景基础上借用的诸如提供共同挂靠使用的单一驻留式 SharedWorker 层。或者构建基于后排的维持保持连接交互更新结构支撑反馈管理交互业务联动过程使用完成信息连线需要操作结果使用。