首页 > 试题广场 >

如何使不同页面之间进行通信

[问答题]

如何使不同页面之间进行通信

拯救世界的光太郎

跨浏览器tab页的通信方案：

1. 两个tab页具有依赖关系：

例如：A页通过JS的window.open打开B页，或B通过iframe嵌入A页

方案：H5的“window.postMessage”。

页面A可以获取页面B的window对象，即可实现A对B的单向通信。如若B需要对A通信，只需要在B界面监听message事件中的source对象，该对象即为A页面window对象的引用

2. 两个页面属于同源范畴：

方案：H5的storage事件

通过window对象，监听storage的localStorage对象的事件变化（包括item的添加、修改、删除）

3. 两个互不相关的tab页面通信

方案：互不相关的的两个页面tabA欲与tabB通信。在tabA中嵌入iframeA，在tabB中嵌入iframeB，这两个iframe中引入相同的页面bridge.html。

tabA向tabB发消息：

1. tabA通过postMessage发消息给iframeA（tabA可以获取iframeA的window对象的iframe.contentWindow）

2. iframeA通过storage与iframeB通信（直接采用方案2）

3. iframeB通过postMessage发消息给tabB（在iframe中通过window.parent引用tabB的window对象）

反之亦然。

细节请看：https://segmentfault.com/a/1190000011207317

编辑于 2022-03-08 07:29:22 回复(0)

RENYE201904082040639

在React中，可以使用React router进行页面间的跳转，同时可以带参数。或者使用redux同一管理state，页面只需要订阅所需state，在其他页面发出改变state的dispatch后，订阅了这个state属性的页面都可以监听到变化，并发生页面重新渲染

发表于 2019-07-17 23:44:09 回复(0)

容王nim

websocket

发表于 2020-12-02 11:51:09 回复(0)

火柴哥

<p>在vue中可以使用vuex来进行数据管理和页面中数据的流通</p>

发表于 2020-06-19 16:21:29 回复(0)

提交观点

问题信息

上传者：小小

难度：

4条回答 23收藏 1031浏览

扫一扫，把题目装进口袋