当前位置：首页 > news >正文

【electron】webview嵌入页面发送消息给父级页面

news 2025/6/28 0:45:15

场景需求：

嵌入页面操作时，通知父级页面

涉及知识点：

contextBridge 嵌入页面可使用暴露的对象
ipc-message 监听嵌入页面发送的消息
webview preload 嵌入页面运行加载的脚本

问题（两种方式）

使用监听ipc-message需要在嵌入页面安装electron，需求不允许
使用contextBridge创建全局对象，无法接收消息

解决思路

contextBridge暴露ipcRenderer给嵌入页面使用，再用ipc-message监听收到的消息

父级页面

<webview v-if="webviewerUrl" ref="webviewRef" class="webview" src="D://child.html" allowp:preload="webViewerPreload()" nodeintegration plugins disablewebsecurity>
</webview>
<script lang="ts" setup>
const webviewRef = ref()
// 控制第三方页面操作栏
const initWebviewEvent= () => {webviewRef.value.addEventListener('dom-ready', () => {// webviewRef.value.openDevTools() //打开嵌入页面的控制台})// 在此监听事件中接收嵌入页面的消息webviewRef.value.addEventListener('ipc-message', function (event: any) {if (event.channel === 'closeWindow') {// 需要执行的代码}});
}
onMounted(() => {nextTick(() => {initWebviewEvent()})
})
onBeforeUnmount(() => {webviewRef.value.removeEventListener('dom-ready')webviewRef.value.removeEventListener('ipc-message')
})
</script>

preload引入本地文件(`file://` 格式)

import path from 'path'
export const webViewerPreload = () => {if (process.env.NODE_ENV === 'production') {return path.join(__dirname, '/preload.js')} else {return path.resolve('./src/entries/webViewer/preload.js')}
}

preload.js 暴露ipcRenderer 到全局

const { contextBridge, ipcRenderer } = require('electron')
// 存储全局方法
contextBridge.exposeInMainWorld('electron', {ipcRenderer: ipcRenderer
})

嵌入页面 child.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>child</title>
</head>
<body><button onclick="closeWindow()">关闭窗口</button><script type="text/javascript">function closeWindow(){const ipcRenderer = window.electron.ipcRendereripcRenderer.sendToHost('closeWindow')}</script>
</body>
</html>