Electron - otwieranie nowych okien z poziomu widoku

Stronę tą wyświetlono już: 175 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ę:

Listing 1
  1. enableRemoteModule: true

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

Listing 2
  1. function createWindow() {
  2. win = new BrowserWindow({
  3. width: initializeApp.initialData.windowWidth,
  4. height: initializeApp.initialData.windowHeight,
  5. webPreferences: {
  6. nodeIntegration: true,
  7. enableRemoteModule: true
  8. },
  9. });

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:

Listing 3
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello World!</title>
  6. <meta
  7. http-equiv="Content-Security-Policy"
  8. content="script-src 'self' 'unsafe-inline';"
  9. />
  10. <script src="./viewscripts/index-view.js"></script>
  11. <style>
  12. .command-container {
  13. display: flex;
  14. }
  15. .command-container input {
  16. width: calc(100vw - 30px);
  17. }
  18. </style>
  19. </head>
  20. <body style="background: white">
  21. <h1>Hello World!</h1>
  22. <p>
  23. We are using node
  24. <script>
  25. document.write(process.versions.node);
  26. </script>
  27. , Chrome
  28. <script>
  29. document.write(process.versions.chrome);
  30. </script>
  31. , and Electron
  32. <script>
  33. document.write(process.versions.electron);
  34. </script>
  35. .
  36. </p>
  37. <div class="command-container">
  38. <input type="text" /><button id="ok">Ok</button>
  39. </div>
  40. <button id="show-brand-new-widnow">Obliczeniowo.com.pl</button>
  41. <button id="new-window">Nowe okno</button>
  42. </body>
  43. </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:

Listing 4
  1. /**
  2. * import ipcRenderer-a umożliwiającego wysyłanie informacji
  3. */
  4. const ipcRenderer = require("electron").ipcRenderer;
  5. const electron = require("electron");
  6. window.addEventListener("load", () => {
  7. const okButton = document.querySelector("#ok");
  8. const msgInput = document.querySelector("input[type='text']");
  9. const obliczeniowoButton = document.querySelector("#show-brand-new-widnow");
  10. const newWindow = document.querySelector("#new-window");
  11. okButton.addEventListener("click", () => {
  12. const message = msgInput.value;
  13. /**
  14. * Wysyłanie informacji
  15. */
  16. ipcRenderer.send("electron-log-message", `Message: ${message}`);
  17. });
  18. msgInput.addEventListener("keydown", (event) => {
  19. if (event.code === "Enter") {
  20. const message = msgInput.value;
  21. /**
  22. * Wysyłanie informacji
  23. */
  24. ipcRenderer.send("electron-log-message", `Message: ${message}`);
  25. msgInput.value = "";
  26. }
  27. });
  28. obliczeniowoButton.addEventListener("click", () => {
  29. /**
  30. * Otwieranie okna i załadowanie strony obliczeniowo.com.pl
  31. */
  32. window.open("https://obliczeniowo.com.pl", "_blank", "nodeIntegration=no");
  33. });
  34. newWindow.addEventListener("click", () => {
  35. const BrowserWindow = electron.remote.BrowserWindow;
  36. /**
  37. * Tworzenie nowego okna z widoku
  38. */
  39. const win = new BrowserWindow({
  40. parent: electron.remote.getCurrentWindow(),
  41. width: 800,
  42. height: 700,
  43. modal: true,
  44. webPreferences: {
  45. nodeIntegration: false
  46. }
  47. })
  48. win.loadFile('./new-view.html');
  49. });
  50. });

Oraz kod widoku nowego okna:

Listing 5
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>New Window World</title>
  6. <meta
  7. http-equiv="Content-Security-Policy"
  8. content="script-src 'self' 'unsafe-inline';"
  9. />
  10. <script src="./viewscripts/index-view.js"></script>
  11. <style>
  12. .command-container {
  13. display: flex;
  14. }
  15. .command-container input {
  16. width: calc(100vw - 30px);
  17. }
  18. </style>
  19. </head>
  20. <body style="background: white">
  21. <h2>A brand, brand new window!</h2>
  22. </body>
  23. </html>
Strony powiązane
strony powiązane
  1. github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium zawierająca kod umożliwiający otwieranie nowych okien

Komentarze