feat(iframe): 实现知识库应用的 iframe 通信功能

- 优化 message-channel.js 实现父子页面间的通信机制
- 更新配置文件,添加杭州环境地址配置
- 更新依赖包配置,新增 markdown-it 和 markdown-it-katex 支持
- 实现基于 MessageChannel API 的跨域通信
- 添加布局控制功能,支持在 iframe 中隐藏/显示界面元素
This commit is contained in:
Huangzhe
2025-05-07 16:46:46 +08:00
parent 3b9ebaa814
commit 45c84265ea
2 changed files with 29 additions and 14 deletions

View File

@@ -1,29 +1,42 @@
// 保存端口引用
let port
/**
* 控制处理各种消息
* @type {Map <string, boolean>}
*/
const handle = new Map()
handle.set('layout', false)
/**
* 接收来自主页面的初始化消息
* @param e {MessageEvent}
*/
self.onmessage = function initHandler(e) {
const { ports = [], data } = e
console.log(`Worker收到消息:`, data)
const {ports = [], data} = e
// console.log(`Worker收到消息:`, data)
// 只处理初始化消息
if (data !== 'init-worker' || ports.length === 0) {
return
}
console.log(`Worker初始化接收到端口:`, ports[0])
port = ports[0]
// console.log(`Worker初始化接收到端口:`, ports[0])
self.port = ports[0]
// 设置定时器发送消息
setTimeout(() => {
console.log(`定时器触发,开始发送消息`)
port.postMessage('init-worker-success')
}, 4000)
self.port.onmessage = messageHandler
// 初始化完成后,可以移除主消息监听器,改为只监听端口消息
self.onmessage = null
}
/**
* 父节点事件配置
* @param event {MessageEvent}
*/
function messageHandler(event) {
// console.log('has been received event',event)
if (handle.has(event.data.type)){
self.port.postMessage(handle.get(event.data.type))
}
}