Electron - przesyłanie danych pomiędzy oknami

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 581 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
strony powiązane
  1. github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium zawierająca kod umożliwiający przesyłanie informacji z okna rodzica do dziecka
Propozycje książek
tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera  autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych autor: Laurence Lars Svekis, Maaike van Putten, Rob Percival

Tytuł:

JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych

Autor:

Laurence Lars Svekis, Maaike van Putten, Rob Percival

tytuł: JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript autor: Kyle Simpson

Tytuł:

JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript

Autor:

Kyle Simpson

tytuł: Wszechstronny JavaScript. Technologie: GraphQL, React, React Native i Electron autor: Adam D. Scott

Tytuł:

Wszechstronny JavaScript. Technologie: GraphQL, React, React Native i Electron

Autor:

Adam D. Scott

tytuł: JavaScript dla dzieci dla bystrzaków autor: Chris Minnick, Eva Holland

Tytuł:

JavaScript dla dzieci dla bystrzaków

Autor:

Chris Minnick, Eva Holland

tytuł: Modularny JavaScript dla zaawansowanych autor: Nicolas Bevacqua

Tytuł:

Modularny JavaScript dla zaawansowanych

Autor:

Nicolas Bevacqua

tytuł: JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi autor: Lynn Beighley

Tytuł:

JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi

Autor:

Lynn Beighley

tytuł: Matematyka dla programistów JavaScript autor: Jacek Piechota

Tytuł:

Matematyka dla programistów JavaScript

Autor:

Jacek Piechota

tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript autor: Nicholas C. Zakas

Tytuł:

ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript

Autor:

Nicholas C. Zakas

W związku z tym, że firma Helion nie wywiązuje się z swoich zobowiązań naliczania prowizji za każdą zakupioną książkę a kontakt z ową frmą jest nie możliwy autor strony zmuszony został do zablokowania linkowania książek. Za wszelkie niedogodności z tym związane z góry przepraszam i obiecuję włączenie linkowania gdy tylko sprawa zostanie wyjaśniona