Como acessar elementos DOM em elétrons?
estou a tentar adicionar funcionalidade a um botão no ficheiro index.html é a seguinte:
Eu tenho um elemento de botão em index.html
<button id="auth-button">Authorize</button>
em main.js da aplicação, eu tenho
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;
});
});
mas um erro ocorre da seguinte forma:
Uncaught Exception: ReferenceError: document is not defined
3 answers
O DOM não Podeser acedido no processo principal, apenas no renderizador a que pertence.
Existe um módulo ipc, disponível em processo principal assim como o processo renderizador que permite a comunicação entre estes dois via mensagens de sincronização/async.
Você também pode usar o módulo remoto para chamar a API do processo principal do renderizador, mas não há nada que lhe permita fazê-lo ao contrário.
Se precisa executar algo no processo principal como resposta à ação do usuário, use o módulo ipc para invocar a função, então você pode retornar um resultado para o renderizador, também usando ipc.
o código actualizado para reflectir a API actual (v0.37. 8), como @Wolfgang sugeriu no comentário, veja o histórico de edição da API obsoleta, se estiver preso com a versão mais antiga do electrão.
Exemplo de escrita em 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');
});
E no processo principal:
var ipc = require('electron').ipcMain;
ipc.on('invokeAction', function(event, data){
var result = processData(data);
event.sender.send('actionReply', result);
});
Pode usar os conteúdos da web.executeJavaScript (code[, userGesture, callback]) API para executar o código JavaScript.
Por exemplo:
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);
});
Como indicado em Este tutorial:
Em Electrão, temos várias formas de comunicar entre o processo principal e os processos de renderização, tais como os módulos IPC e IPC para o envio de mensagens, e o módulo remoto para a comunicação de estilo RPC.
Para que possas seguir o exemplo em https://github.com/electron/electron-api-demos deve ter um ficheiro js para cada html. Nesse ficheiro js, pode usar require quando quiser. querer.
Código em 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
})
Código em 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>