Electron - przesyłanie danych pomiędzy oknami
Stronę tą wyświetlono już: 629 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;
});
});
});