实现iframe嵌套页面通信

实现iframe嵌套页面通信

在项目中通过iframe标签嵌入其他网页时，该如何iframe页面进行通信呢？小菜鸡在这里简单记录一下~

1、父组件获取子组件：
（注：父组件是当前项目页面，子组件是iframe标签）
Iframe.contentWindow：获取iframe的window对象
Iframe.contentDocument：获取iframe的document对象
当需要从当前页面传递数据给嵌入的iframe页面时，可通过postMessage()方法进行通信。
iframe.contentWindow.postMessage(message, targetOrigin, [transfer]);
postMessage()方法有三个参数，message：即将要传递到其他页面的数据；targetOrigin：指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI，一般用来做数据来源验证；transfer：选填参数，可不传。
示例：

ifr为iframe标签
iframe页面中获取传递的数据：

2、子组件获取父组件：
Window.parent：获取上一级的window对象。如果上一级（父级）还是iframe则是该iframe的window对象
Window.top：获取最顶级容器的window对象
Window.self：返回自身window的引用
（注：调用父级方法，则父级要将发放挂在window层）

iframe页面向引入的页面传递数据：
window.parent.postMessage(message, targetOrigin, [transfer])
获取iframe页面传入的数据，方法与iframe页面获取数据类似，也是通过addEventListener()方法监听message，获取传递的message、targetOrigin等参数数据进行进一步处理。

（ps：如果对您有帮助，希望点个赞噢(~~）