控制台 iframe 嵌入事件通信

背景
本文档用于三方站点嵌入我司页面场景，双方通过 window.postMessage 进行跨页面消息通信。
我司页面触发业务动作后，主动向外抛出对应事件，贵司可监听消息事件，按需处理自身业务逻辑。

通信规则
1、通信方式：浏览器原生 window.postMessage
2、监听方式：页面监听 message 事件接收消息

消息列表

打通嵌入页与外层承载页的通信机制，将直播创建、编辑等动作的消息传递出来，以便页面完成跳转。

例如直播创建成功后，根据读取消息中直播id，拼接到直接详情页的嵌入链接上跳转到直播详情页。

直播创建页面

类型	说明	内容
embed_live_create	直播创建	{ webinar_id: Number, 直播 id }
embed_live_create_cancel	直播创建-取消	{}

直播编辑页面

类型	说明	内容
embed_live_edit	直播编辑	{ webinar_id: Number, 直播 id }
embed_live_edit_cancel	直播编辑-取消	{}

点播创建页面

类型	说明	内容
embed_vod_create	点播创建	{ webinar_id: Number, 直播 id }
embed_vod_create_cancel	点播创建-取消	{}

点播编辑页面

类型	说明	内容
embed_vod_edit	点播编辑	{ webinar_id: Number, 直播 id }
embed_vod_edit_cancel	点播编辑-取消	{}

定时直播创建页面

类型	说明	内容
embed_time_edit	定时直播创建	{ webinar_id: Number, 直播 id }
embed_time_create_cancel	定时直播创建-取消	{}

定时直播编辑页面

类型	说明	内容
embed_time_edit	定时直播编辑	{ webinar_id: Number, 直播 id }
embed_time_edit_cancel	定时直播编辑-取消	{}

直播详情页面

类型	说明	内容
vhOpenHref	发起直播（嵌入页推送消息到外层页面，外层页面根据消息内容执行跳转。建议新标签页打开)	{ type: 'vhOpenHref', url: ''}

路由消息

路由消息用于同步 iframe 内部的页面导航状态到外层站点。由于 iframe 内部页面跳转对外层不可见，因此当用户在嵌入页内切换功能模块时，系统会自动推送路由变化消息，便于外层站点实时感知用户当前所在页面并更新导航状态。

消息类型：vhRouterChange

字段	说明
type	消息类型，固定为 `vhRouterChange`
data	路由信息（JSON 字符串，需自行解析）

data 结构说明

字段	类型	说明
path	string	当前页面完整路径
meta.title	string	页面标题，如"功能配置""

消息示例

{
  "type": "vhRouterChange",
  "data": "{\"path\":\"/embed/live/planFunction/158783102\",\"meta\":{\"title\":\"功能配置\",\"name\":\"planFunction\",\"project\":\"embed\"}}"
}

控制台 iframe 嵌入事件通信

消息列表#

路由消息#

消息列表

路由消息