Webview Electron应用程序：如何使用ipcRenderer.sendToHost（）？

在Electron中，给出了以下示例来说明如何在呈现程序进程和webview中承载的网页之间进行通信：

通过sendToHost方法和ipc消息事件，您可以轻松地在来宾页面和嵌入程序页面之间进行通信：

// In embedder page.
const webview = document.getElementById('foo')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // Prints "pong"
})
webview.send('ping')

// In guest page.
const {ipcRenderer} = require('electron')
ipcRenderer.on('ping', () => {
  ipcRenderer.sendToHost('pong')
})

但是，在我的来宾网页（webview内部）中，当我尝试

require（'electron'）

时，我得到了

uncaughtreferenceerror:require未定义

我还需要做些什么才能从来宾web页面中获得IPC渲染器模块

电子版：1.4.6

注意：我不确定这是否重要，但在我的webview中运行的页面是由本地服务器提供的。在渲染器进程的顶层页面中，我执行类似于：
document.getElementById（“webview”）.src=”http://localhost:1234/...";

编辑：似乎从本地服务器提供我的网页不会改变任何东西。在尝试使用静态HTML文件后，我遇到了相同的错误。看起来文档中的示例根本不起作用，或者我理解错了

// Simple foo.html somewhere on my computer
<script>
    const {ipcRenderer} = require('electron')
        ipcRenderer.on('ping', () => {
        ipcRenderer.sendToHost('pong')
    })
</script>

// In embedder page, in renderer process
document.getElementById("webview").src = "file://path/to/foo.html";

//我的电脑上的某个地方的Simple foo.html
常量{ipcRenderer}=require（'electron'）
在（'ping'，（）=>{
ipcRenderer.sendToHost（'pong'）
})
//在embedder页面中，在渲染器进程中
document.getElementById（“webview”）.src=”file://path/to/foo.html";

嵌入页面的输出（在webview中）：
未捕获引用错误：未定义require
编辑
出于安全原因，在渲染器进程中使用
require
的首选方法是使用
preload
仅注入页面所需的最小节点集成。见本报告第2）点。
IPC渲染器
的一个简单示例：

// main.ts
const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,
    preload: './preload.js'
  }
})

mainWindow.loadURL('https://my-website.com')

在您的网页中，您现在可以使用
window.sendToElectron（“ping”）

如果在渲染器进程内使用
，则可以使用
来获得相同的结果。因此，这就是我用来回答原始问题的方法，在
preload.js
中，我将在全局
窗口中注入一个调用
ipcrender.sendtoohost（“pong”）
的函数


旧答案（不利于安全）
我错过了webview文档中的一个关键点。要能够从嵌入webview的页面调用
require
，需要在webview标签上设置
nodeintegration
属性：

这里需要注意的是，网络视图的节点集成非常非常危险。问问自己是否真的需要它。如果webview用于呈现外部/第三方内容，请不要这样做！是的，答案很旧。我编辑它是为了反映最佳实践。如果是您自己的代码在webview中运行，那么这对安全性来说并不坏。
// preload.js
const { ipcRenderer } = require('electron')

window.sendToElectron= function (channel) {
  ipcRenderer.send(channel)
}