目录
前面已经知道，master, ui, logic的关联是通过iframe来实现的。由于他们都在一个域中，我们使用 postMessage API来实现相互通讯。
通知 UI 层
通知 UI 层需要通过 pid 找到指定页面的iframe。
/**
* 发消息到页面
* @param {Object} data 发送数据
* @param {Number} cid 组件id
* @param {Number} pid 页面id
*/
function postMessageToPage(data, cid, pid) {
const postData = Object.assign(data, {
appId,
cid,
pid
})
const frame = window.parent.frames[`pageFrame_${pid}`]
if (frame) {
frame.contentWindow.postMessage(JSON.stringify(postData), location.origin)
} else {
throw new Exception('Page not found.')
}
}
通知 logic 层
logic 则直接找到 logic 层所在的iframe。
/**
* 发消息到逻辑层
* @param {Object} data 发送数据
* @param {Number} cid 组件id
* @param {Number} pid 页面id
*/
function postMessageToLogic(data, cid, pid) {
const postData = Object.assign(data, {
appId,
cid,
pid
})
window.parent.frames['loginFrame'].contentWindow.postMessage(
JSON.stringify(postData),
location.origin
)
}
通知 master 层
由于master层是原始页面，所以直接往父级页面post数据即可。
/**
* 发消息到管理层
* @param {Object} data 发送数据
*/
function postMessage(data) {
const postData = Object.assign(data, {
appId
})
window.parent.postMessage(JSON.stringify(postData), location.origin)
}
