Wie greife ich auf DOM-Elemente in Elektronen zu?

Ich versuche, einer Schaltfläche in einer index.htmlDatei folgende Funktionen hinzuzufügen : Ich habe ein Schaltflächenelement inindex.html

<button id="auth-button">Authorize</button>

In main.jsder App habe ich

require('crash-reporter').start();
console.log("oh yaeh!");
var mainWindow = null;

app.on('window-all-closed', function(){
    if(process.platform != 'darwin'){
        app.quit();
    }
});

app.on('ready',function(){
    mainWindow = new BrowserWindow({width:800, height : 600});
    mainWindow.loadUrl('file://' + __dirname + '/index.html');

    var authButton = document.getElementById("auth-button");
    authButton.addEventListener("click",function(){alert("clicked!");});

    mainWindow.openDevTools();

    mainWindow.on('closed',function(){
        mainWindow = null;
    });
});

Ein Fehler tritt jedoch wie folgt auf: Uncaught Exception: ReferenceError: document is not defined

Kann auf die DOM-Objekte zugegriffen werden, während Elektronen-Apps erstellt werden? oder gibt es eine andere alternative Möglichkeit, die mir die erforderliche Funktionalität bietet?

Auf DOM kann im Hauptprozess nicht zugegriffen werden, nur in dem Renderer, zu dem es gehört.

Es gibt ein ipcModul, das sowohl für den Hauptprozess als auch für den Renderer-Prozess verfügbar ist und die Kommunikation zwischen diesen beiden über Synchronisierungs- / Asynchronisierungsnachrichten ermöglicht.

Sie können das Remote- Modul auch verwenden, um die Hauptprozess-API vom Renderer aufzurufen, aber es gibt nichts, was es Ihnen erlauben würde, es umgekehrt zu tun.

Wenn Sie im Hauptprozess etwas als Antwort auf eine Benutzeraktion ausführen müssen, verwenden Sie das ipcModul, um die Funktion aufzurufen. Anschließend können Sie ein Ergebnis an den Renderer zurückgeben, auch mit ipc.

Code aktualisiert, um die tatsächliche (v0.37.8) API widerzuspiegeln, wie @Wolfgang im Kommentar vorgeschlagen hat, siehe Bearbeitungsverlauf für veraltete API, wenn Sie mit einer älteren Version von Electron nicht weiterkommen.

Beispielskript in index.html:

var ipc = require('electron').ipcRenderer;
var authButton = document.getElementById('auth-button');
authButton.addEventListener('click', function(){
    ipc.once('actionReply', function(event, response){
        processResponse(response);
    })
    ipc.send('invokeAction', 'someData');
});

Und im Hauptprozess:

var ipc = require('electron').ipcMain;

ipc.on('invokeAction', function(event, data){
    var result = processData(data);
    event.sender.send('actionReply', result);
});

Sie können die API webContents.executeJavaScript (Code [, UserGesture, Callback]) verwenden , um JavaScript-Code auszuführen.

zum Beispiel:

mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.webContents.on('did-finish-load', ()=>{
    let code = `var authButton = document.getElementById("auth-button");
            authButton.addEventListener("click",function(){alert("clicked!");});`;
    mainWindow.webContents.executeJavaScript(code);
});

Wie in diesem Tutorial angegeben :

In Electron gibt es verschiedene Möglichkeiten, zwischen dem Hauptprozess und den Renderer-Prozessen zu kommunizieren, z. B. ipcRenderer- und ipcMain-Module zum Senden von Nachrichten und das Remote-Modul für die Kommunikation im RPC-Stil.

Sie können dem Beispiel also unter https://github.com/electron/electron-api-demos folgen . Sie sollten jsfür jede eine Datei haben html. In dieser jsDatei können Sie jederzeit verwenden require.

Code in renderer.js:

const ipc = require('electron').ipcRenderer

const asyncMsgBtn = document.getElementById('async-msg')

asyncMsgBtn.addEventListener('click', function () {
  ipc.send('asynchronous-message', 'ping')
})

ipc.on('asynchronous-reply', function (event, arg) {
  const message = `Asynchronous message reply: ${arg}`
  document.getElementById('async-reply').innerHTML = message
})

Code in ipc.html:

<script type="text/javascript">
  require('./renderer-process/communication/sync-msg')
  require('./renderer-process/communication/async-msg')
  require('./renderer-process/communication/invisible-msg')
</script>