Electron - otwieranie nowych okien z poziomu widoku

Autor podstrony: Krzysztof Zajączkowski

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

Electron jako aplikacja dekstopowa może zarządzać wieloma oknami. Jedno takie okno zostało już prze mnie stworzone przy tworzeniu podstawowego projektu. Teraz nadszedł czas aby otworzyć okno z poziomu widoku. Zanim jednak to nastąpi konieczne jest przy tworzeniu okna głównego programu dodać opcję:

enableRemoteModule: true

W następującym fragmencie kodu zapisanego (w moim przypadku) w pliku main.js:

function createWindow() { win = new BrowserWindow({ width: initializeApp.initialData.windowWidth, height: initializeApp.initialData.windowHeight, webPreferences: { nodeIntegration: true, enableRemoteModule: true }, });

Bez tej opcji nie możliwy byłby dostęp do niektórych elementów Electrona.

W celu otworzenia nowego okna w pliku index.html widoku okna głównego dodam dwa przyciski, pod które podepnę się i otworzę na ich kliknięcie nowe okna programu. Zanim jednak to nastąpi, oto kod z wcześniej wymienionego pliku:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <script src="./viewscripts/index-view.js"></script> <style> .command-container { display: flex; } .command-container input { width: calc(100vw - 30px); } </style> </head> <body style="background: white"> <h1>Hello World!</h1> <p> We are using node <script> document.write(process.versions.node); </script> , Chrome <script> document.write(process.versions.chrome); </script> , and Electron <script> document.write(process.versions.electron); </script> . </p> <div class="command-container"> <input type="text" /><button id="ok">Ok</button> </div> <button id="show-brand-new-widnow">Obliczeniowo.com.pl</button> <button id="new-window">Nowe okno</button> </body> </html>

Jak widać dodałem dwa przyciski, które nie tylko otworzą okna oddzielne, ale jedno z nich otworzy widok z pliku, drugie widok z stroną obliczeniowo.com.pl. Oto kod z pliku index-view.js:

/** * import ipcRenderer-a umożliwiającego wysyłanie informacji */ const ipcRenderer = require("electron").ipcRenderer; const electron = require("electron"); 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 = ""; } }); 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; /** * Tworzenie nowego okna z widoku */ const win = new BrowserWindow({ parent: electron.remote.getCurrentWindow(), width: 800, height: 700, modal: true, webPreferences: { nodeIntegration: false } }) win.loadFile('./new-view.html'); }); });

Oraz kod widoku nowego okna:

<!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';" /> <script src="./viewscripts/index-view.js"></script> <style> .command-container { display: flex; } .command-container input { width: calc(100vw - 30px); } </style> </head> <body style="background: white"> <h2>A brand, brand new window!</h2> </body> </html>

Strony powiązane

github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium zawierająca kod umożliwiający otwieranie nowych okien