Electron预加载脚本中如何等待异步回调执行完成？

这个问题我之前也碰到过，核心原因是预加载脚本的执行时机和webview的session上下文绑定问题：直接在预加载脚本里调用session.defaultSession.cookies.get的回调时，webview对应的session可能还没完全初始化就绪，导致回调无法触发；而当页面加载完成后调用封装的函数，此时session已经稳定绑定，所以能正常获取Cookie。

要实现“Cookie在其他脚本加载前就绪”的需求，推荐采用主进程IPC通信+预加载脚本异步等待+页面事件通知的方案，既安全又可靠，具体步骤如下：

1. 主进程中实现Cookie获取的IPC handler #

把Cookie获取逻辑放到主进程（避免预加载脚本中remote模块的上下文问题，同时符合Electron的安全规范）：

// main.js 主进程代码
const { ipcMain, session } = require('electron');

// 注册IPC handler，处理获取templates Cookie的请求
ipcMain.handle('get-templates-cookie', async () => {
  try {
    const cookies = await session.defaultSession.cookies.get({ name: 'templates' });
    if (!cookies || cookies.length === 0) {
      throw new Error('templates Cookie不存在');
    }
    // 直接解析好返回给预加载脚本
    return JSON.parse(cookies[0].value);
  } catch (err) {
    console.error('获取Cookie失败:', err);
    throw err;
  }
});

2. 预加载脚本中异步等待Cookie并暴露到页面 #

用async/await等待Cookie获取完成，再通过contextBridge安全地暴露到页面上下文，同时触发自定义事件通知页面Cookie已就绪：

// my-preload.js 预加载脚本
const { contextBridge, ipcRenderer } = require('electron');

// 立即执行异步函数等待Cookie
(async () => {
  try {
    const templates = await ipcRenderer.invoke('get-templates-cookie');
    // 安全暴露到window对象
    contextBridge.exposeInMainWorld('myTemplates', templates);
    // 触发自定义事件，通知页面Cookie已就绪
    window.dispatchEvent(new CustomEvent('templates-ready'));
  } catch (err) {
    console.error('预加载脚本获取Cookie失败:', err);
  }
})();

3. 页面脚本等待Cookie就绪后执行 #

在你的webview页面（http://localhost:3500）的脚本中，通过监听自定义事件来确保Cookie就绪后再执行依赖代码：

// 页面脚本
window.addEventListener('templates-ready', () => {
  console.log('Templates Cookie已就绪:', window.myTemplates);
  // 这里执行所有依赖myTemplates的逻辑
  initAppWithTemplates(window.myTemplates); // 示例：初始化应用的函数
});

额外说明 #

• 为什么不用remote模块？Electron 14+版本默认禁用了remote模块，且它存在安全风险（会暴露Node.js API到页面），用contextBridge+IPC的方式是官方推荐的安全做法。
• 如果你的页面脚本是内联或同步加载的，一定要通过templates-ready事件来等待，不要直接访问window.myTemplates，因为异步获取Cookie需要时间。
• 如果必须阻塞页面脚本加载直到Cookie就绪，可以考虑在预加载脚本中拦截页面的脚本加载（比如用document.addEventListener('beforeload')），但这种方式复杂度较高，不推荐，优先用事件通知的方式。

内容的提问来源于stack exchange，提问作者randydalton411