浏览器页面之间进行通信的四种方式

1、localStorage

一个窗口更新localStorage,另一个窗口监听window对象的”storage”事件,来实现通信。
注:两个页面要同源(URL的协议、域名和端口相同)

%title插图%num

2、cookie+setInterval()
page1将要传递的信息存储在cookie中,page2使用setInterval每隔一定时间读取cookie信息,即可随时获取要传递的信息。

3、postMessage
html5引入了一个跨文档通信的API,这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。
该方法只解决了前端两个窗口的通信,但无法解决前后台调用的跨域问题。使用 window.postMessage(),就注定了你首先得拿到window这个对象。 也注定他使用的限制, 两个窗体必须建立起联系。 常见建立联系的方式: window.open、 window.opener、iframe

4、WebSocket 服务器中转
需要页面都与服务器建立 WebSockets 连接;支持跨域;
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,两者之间就直接可以数据互相传送。你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。