通过postmessage实现iframe父子之间的通信

222 阅读1分钟

postmessage可以实现父子之间的通信,比如我在iframe中想得到父组件中的一些信息,如果直接拿是无法拿到的,但是,通过postmessage的方式可以拿到一些信息,并通过一个验证的方式,确定得到对方发送的信息

这个设计模式其实是发布订阅的方式,在广播之后,在window全局作用域监听了message事件的地方,都可以收听到指定对方的广播信息

子向父 通过window.parent,得到父window的句柄,然后通过父window,window.postMessage方法全局发送消息,在父级订阅的地方就可以接收到消息

父向子 通过iframe的引用,得到子iframe的contentwindow,然后通过 window.postMessage,再指定一个特定域名,或者特定域名为*代表全部子iframe,这样在所有订阅到的地方就可以收听到发送的广播