永康市住房建设局网站推广商
场景需求：
- 嵌入页面操作时，通知父级页面
涉及知识点：
- 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>
总结：两种方法看了很久都没法实现，后面突然想到可以结合起来，可以将嵌入页面的消息发送给父级，但是嵌入页面不能收消息，不知道怎么解决。