Electron 从低版本升级到高版本 - webview通信的改造

toobeloong2025-10-20 20:41

旧版本的webview，在通信时，是通过webview.contentWindow.postMessage()跟你的url进行通信的，如果你们一开始就是使用ipcRenderer的话，那应该就不用调整了，但是如果一开始就只是使用普通的postMessage的话，就要改造一下，下面我们来改改webview的通信升级。

首先，改写一下webview需要加载的preload文件，添加contextBridge内容；

javascript 复制代码

const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
    // 这里可以添加发送到主进程的消息
sendMessageToMain: message => {
    ipcRenderer.send('message-from-webview', message);
    ipcRenderer.sendToHost('message-from-webview', message);
  },
  onMessageFromRenderer: callback => ipcRenderer.on('ipc-message', (event, ...args) => callback(...args)),
});


// 把具体内容注入到你的webview里面

window.addEventListener('DOMContentLoaded', () => {
  const style = document.createElement('style');
  style.textContent = 'img {user-drag: none; -webkit-user-drag: none}';
  document.head.appendChild(style);
  const scriptTag = document.createElement('script');
  scriptTag.textContent = `
    (function (global) {
      window.electron.onMessageFromRenderer((msg, ...arg) => {
        // 这里可以添加回调发送给主进程的内容
        window.electron.sendMessageToMain();
    });
    })(window);
    console.debug("Script 注入成功！");
  `;
  document.body.appendChild(scriptTag).parentNode.insertBefore(scriptTag, document.body.lastChild);
});

好了，这个时候，你在加载完webview之后，就可以往里面发消息了；

javascript 复制代码

    webview.send('ipc-message', {type: 'demo'});

webview的改造不多，还有就是一些使用webview时需要注意的方法调用问题，就看看文档吧；

https://github.com/electron/electron/blob/28-x-y/docs/api/webview-tag.md