Pass data from electron project to iframe

Question

I have an electron app and inside that app I have an iframe which calls a url that runs a different react project. So I am able to send data from react project to electron project by using;

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

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

my preload.js has;

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));
            }
        }
    }
);

---

I want to send data by using something like this;

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

from electron app and catch that data from react part that works in iframe.

How can i get that data in react app ?

Thanks in advance

Answer 1

Below code worked for me.

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;
}