Electron - przesyłanie danych pomiędzy oknami

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 553 razy

Wiele się naczytałem jakoby nie można było przesyłać bezpośrednio informacji z jednego okna do drugiego bez pośredników. Cóż za pokrętna logika za tym stoi, a co jeżeli chciałbym utworzyć okno z poziomu danego widoku? Da się, czy się nie da w końcu przesyłać po ludzku informacje pomiędzy takimi oknami? Odpowiedź zdaje się oczywista więc przejdźmy do konkretów.

W pliku new-view.html należy poczynić nieco następujących zmian:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>New Window World</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <style> #messages p { border-radius: 5px; border: solid 1px black; padding: 5px; } </style> <script src="viewscripts/new-view.js"></script> </head> <body style="background: white"> <h2>A brand, brand new window!</h2> <div id="messages"></div> </body> </html>

I dodać nowy plik new-view.js skryptu powiązanego z tymże widokiem okna:

const electron = require("electron"); const ipcRenderer = require("electron").ipcRenderer; ipcRenderer.on("sending-maesage", (event, arg) => { let p = document.createElement('p'); p.innerText = arg; document.querySelector('#messages').appendChild( p ); });

Pozostało już tylko zaktualizowanie skryptu z pliku index-view.js, gdzie dodałem przesyłanie komunikatów z okna głównego do okna dziecka:

/** * import ipcRenderer-a umożliwiającego wysyłanie informacji */ const ipcRenderer = require("electron").ipcRenderer; const electron = require("electron"); let newViewWindow = undefined; window.addEventListener("load", () => { const okButton = document.querySelector("#ok"); const msgInput = document.querySelector("input[type='text']"); const obliczeniowoButton = document.querySelector("#show-brand-new-widnow"); const newWindow = document.querySelector("#new-window"); okButton.addEventListener("click", () => { const message = msgInput.value; /** * Wysyłanie informacji */ ipcRenderer.send("electron-log-message", `Message: ${message}`); }); msgInput.addEventListener("keydown", (event) => { if (event.code === "Enter") { const message = msgInput.value; /** * Wysyłanie informacji */ ipcRenderer.send("electron-log-message", `Message: ${message}`); msgInput.value = ""; /** * Gdy okno istnieje to wyślij do niego message */ if (newViewWindow !== undefined) { newViewWindow.webContents.send("sending-maesage", message); } } }); obliczeniowoButton.addEventListener("click", () => { /** * Otwieranie okna i załadowanie strony obliczeniowo.com.pl */ window.open("https://obliczeniowo.com.pl", "_blank", "nodeIntegration=no"); }); newWindow.addEventListener("click", () => { const BrowserWindow = electron.remote.BrowserWindow; if (newViewWindow) { return; } /** * Tworzenie nowego okna z widoku */ newViewWindow = new BrowserWindow({ parent: electron.remote.getCurrentWindow(), width: 800, height: 700, modal: false, webPreferences: { nodeIntegration: true, enableRemoteModule: true, }, }); newViewWindow.loadFile("./new-view.html"); newViewWindow.on("closed", () => { newViewWindow = undefined; }); }); });

Strony powiązane