Remote-Modul verwenden
Das Remote-Modul ermöglicht die indirekte Nutzung von IPC-Objekten - empfohlen wird jedoch die direkte Nutzung. Die direkte Nutzung von IPC-Objekten bietet mehr Kontrolle und viele weitere Möglichkeiten.
Du kannst in Electron beliebig viele Renderprozesse anlegen / starten. Jeder Render-Prozess besteht im Grunde nur aus einer neuen HTML-Datei und optional einer neuen JavaScript-Datei, die den jeweiligen Render-Prozess starten soll.
js-Dateien einbinden
Um deinen Code besser zu strukturieren, empfiehlt es sich je nach Aufgabe die Dateien zu sortieren bzw. sie in Unterordnern zu trennen. Dies gibt dir einen wesentlich besseren Überblick.
Dazu benötigst du (wie auf Webseiten) einfach folgende Schreibweise:
<script src="src/js/routing.js"></script>
@electron/remote
@electron/remote
ist ein Electron-Modul, das JavaScript-Objekte vom Hauptprozess zum Renderer-Prozess überbrückt. Dadurch kannst du auf Objekte, die nur im Hauptprozess verfügbar sind, so zugreifen, als ob sie im Renderer-Prozess verfügbar wären.
siehe https://www.npmjs.com/package/@electron/remote
Um ein weiteres Fenster per remote zu deiner Electron-App hinzuzufügen, kannst du beispielsweise folgendes tun: füge der main.js
folgendes hinzu:
<h2>weitere Ansicht starten</h2>
<button id="view2" type="button" class="btn btn-info">View 2 starten</button>
<script src="js/routing.js"></script>
Das Remote-Modul musst du übrigens separat mit folgendem Befehl installieren:
npm i @electron/remote
Anschließend musst du noch das Remote-Modul in deiner main.js
aktivieren:
// laden des Moduls
const remote = require('@electron/remote/main')
// initialisieren des Moduls
remote.initialize()
function createWindow() {
const mainWindow = new BrowserWindow({
icon: "assets/icons/app_icon.png",
width: 800, height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
// aktivieren des Moduls
enableRemoteModule: true
},
});
// Webcontents aktivieren
remote.enable(win.webContents)
}
In der routing.js
kann ich die einzelnen Views angeben die bei einem bestimmten Event geladen werden sollen:
const view2 = document.getElementById('view2')
view2.addEventListener('click', function (event){
const {BrowserWindow} = require('@electron/remote')
// lässt du die Abmessungen weg, wird die Standardgröße für Fenster verwendet (800px x 600px)
const window2 = new BrowserWindow({
width:400, height: 400,
// gibst du max.-Werte ein, kann das Fenster nicht weiter vergrößert werden
maxWidth: 500,
maxHeight: 500,
// Farben anpassen
backgroundColor: '#000000',
// Rahmen und Menü deaktivieren
frame: false
})
window2.loadFile('src/view2.html')
})
child / parent
Ein Fenster wird als child
-Fenster definiert, wenn du als Parameter einen parent
angibst. Dann bleibt das child
-Fenster immer im Vordergrund. Zudem werden alle child
-Fenster geschlossen, wenn das parent
-Fenster geschlossen wird. Zumindest, wenn du nicht modal
aktiviert hast -> siehe unten.
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
icon: "assets/icons/app_icon.png",
width: 800, height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
},
});
remote.enable(mainWindow.webContents)
mainWindow.loadFile("src/index.html");
// Im Fenster wird die URL von Couchidee aufgerufen - das child-Fenster bleibt immer im Vordergrund
const couchideeBrowser= new BrowserWindow({width: 1000,height: 800, parent: mainWindow})
couchideeBrowser.loadURL("https://www.couchidee.com")
}
once / show / modal
Um ein Fenster erst anzuzeigen, wenn der Inhalt fertig geladen ist, benötigst du folgende Schreibweise:
const couchideeBrowser = new BrowserWindow({show: false, width: 1000,height: 800, parent: mainWindow, modal: true})
couchideeBrowser.loadURL("https://www.couchidee.com")
couchideeBrowser.once('ready-to-show', () => {
couchideeBrowser.show()
})
Die Kombination aus parent: mainWindow, modal: true
verbietet es, solange das child
-Fenster aktiv ist, irgendetwas im parent
-Fenster zu tun.
weitere Informationen findest du unter: https://www.electronjs.org/de/docs/latest/api/browser-window