修改

Question

在Electron documentation for the webview tag中，以下示例显示了如何在渲染器进程与webview中托管的网页之间进行通信：

使用sendToHost方法和ipc-message事件，您可以轻松地在访客页面和嵌入页面之间进行通信：

// 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')
})

但是，在我的访客网页（在网页浏览中），当我尝试Uncaught ReferenceError: require is not defined时，我会收到require('electron')，如文档中所示。

为了能够从访客网页上要求ipcRenderer模块，我还需要做些什么吗？

电子版： 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";

嵌入页面的输出（在webview内）： Uncaught ReferenceError: require is not defined

Answer 1

修改

出于安全原因，在渲染器进程中使用require的首选方法是使用preload仅注入页面所需的最小节点集成。见Electron's security recommendations的第2点）。 ipcRenderer的最小示例：

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

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

// preload.js
const { ipcRenderer } = require('electron')

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

在您的网页中，您现在可以使用window.sendToElectron("ping")。

如果您在渲染器进程中使用<webview>，则可以使用<webview src="page.html" preload="./preload.js" />来获得相同的结果。所以，这就是我用来回答原始问题的内容，在preload.js内我会注入一个在全局ipcRenderer.sendToHost("pong")中调用window的函数。

旧答案（对安全性不利）

我错过了webview文档中的一个重要点。为了能够从嵌入在webview中的页面调用require，您需要在webview标记上设置nodeintegration属性：

<webview id="webview" nodeintegration />

电子app：你如何使用ipcRenderer.sendToHost（）？

1 个答案:

修改

旧答案（对安全性不利）