iFrame父子页面相互通信

应用场景：

在父页面（或子页面）发生相应动作，例如click点击事件等，在子页面（或父页面）进行对应的事件相应

描述：

以HT for web（图扑软件）为例，对父页面进行监听，根据业务需要，当点击对应组件时，发送消息给子页面，同时对子页面进行监听，收到父页面的消息后做出响应

父页面传递消息给子页面：

// 此方法写在父页面中
function iframeMessage(message){
    let iframe = $('#iframe')[0];
    iframe.contentWindow.postMessage(message, '*');
}
// message参数即为要传递给子页面的消息，可以为字符串，true、flase或者为对象

子页面接收数据，对子页面进行监听

// 得到父页面传的值，此方法写在子页面中
window.addEventListener('message', function (event) {
    console.log(event.data); // event.data即为传过来的值
    // 这里写具体的业务代码
}, false);

子页面传递消息给父页面，graphView同样也为子页面对象，需要根据具体业务获取

// 此方法写在子页面，监听子页面，其中graphView为子页面对象，根据具体业务获取
graphView.addInteractorListener(function (e) {
    if(e.kind == 'clickData' ) {
        window.top.postMessage('close');   // 单击事件，传递字符串"close"
    }
});

父页面接收子页面传过来的消息

// 监听子页面传过来的值，如果是'close' ,则关闭对话框
window.addEventListener('message',function(e){
    if('close' == e.data){
         // 具体业务代码       
    }
},false);