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

本文介绍: 【electron】webview 嵌入页面发送消息给父级页面

场景 需求：

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

涉及知识点：

问题（两种方式）

使用监听 ipc–message 需要在嵌入页面安装 electron，需求不允许
使用c on textBr i dg e 创建全局对象，无法接收消息

解决 思路

c on textBr i dg e暴露ipcRendere r给嵌入页面使用，再用ipc–message 监听 收到的消息

父级页面

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

p reload 引入 本地 文件(`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')
  }
}

p reload.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.ipcRenderer
            ipcRenderer.sendToHost('closeWindow')
        }
    </script>
</body>
</html>