将数据从电子项目传递到 iframe

Question

我有一个 Electron 应用程序，在该应用程序中我有一个 iframe，它调用一个运行不同 React 项目的 url。所以我可以通过使用将数据从 React 项目发送到 Electron 项目；

declare global {
  interface Window {
    api? : any
  }
}

window.api.send("print", allData); // THAT WORKS

我的preload.js有；

contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["print", "getPrinters"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["receiptStatusBack", "printers"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

我想用这样的方式发送数据；

function sendPrintStatusToServer(result) {
    console.log("Print status: ", result)
    win.webContents.send("receiptStatusBack", result);
}

来自电子应用程序并从在 iframe 中工作的反应部分捕获数据。

我如何在 React 应用程序中获取该数据？

提前致谢

Answer 1

下面的代码对我有用。

declare global {
  interface Window {
    api? : any
  }
}

if(isElectron()) {
  window.api.receive("printers", (printerList) => {
    console.log("[PRINTER.TSX..] Printers: ", printerList);
  })
  window.api.receive("receiptStatusBack", (data) => {
    console.log("[PRINTER.TSX..] Print status: ", data);
  })
}

function isElectron() {
  // Renderer process
  if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
    return true;
  }

  // Main process
  if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
    return true;
  }

  // Detect the user agent when the `nodeIntegration` option is set to false
  if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
    return true;
  }

  return false;
}

将数据从电子项目传递到 iframe

Pass data from electron project to iframe

reactjs

electron

electron-react-boilerplate