Cách truy cập các phần tử DOM trong điện tử?

Question

Tôi cố gắng để thêm chức năng cho một nút trong index.html tập tin là như sau: Tôi có một yếu tố nút trong index.html

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

Trong main.js của ứng dụng, tôi có

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; 
    }); 
}); 

Nhưng một lỗi xảy ra như sau: Uncaught Exception: ReferenceError: document is not defined

Các đối tượng DOM có thể được truy cập trong khi xây dựng ứng dụng điện tử không? hoặc có cách nào khác thay thế có thể cung cấp cho tôi các chức năng cần thiết?

Answer 1

DOM có thể không được truy cập trong quá trình chính, chỉ trong trình kết xuất đồ họa.

Có mô-đun ipc, có sẵn trên main process cũng như renderer process cho phép liên lạc giữa hai thông qua thông báo đồng bộ/không đồng bộ.

Bạn cũng có thể sử dụng mô-đun remote để gọi API quá trình chính từ trình kết xuất đồ họa, nhưng không có gì cho phép bạn thực hiện theo cách khác.

Nếu bạn cần chạy một thứ gì đó trong quá trình chính làm phản hồi cho hành động của người dùng, hãy sử dụng mô-đun ipc để gọi hàm, sau đó bạn có thể trả về kết quả cho trình kết xuất đồ họa, cũng sử dụng ipc.

Mã được cập nhật để phản ánh API thực tế (v0.37.8), như @Wolfgang đề xuất trong nhận xét, xem lịch sử chỉnh sửa cho API không dùng nữa, nếu bạn đang mắc kẹt với phiên bản cũ hơn của Electron.

Ví dụ kịch bản trong 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'); 
}); 

Và trong quá trình chính:

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

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

Answer 2

Bạn có thể sử dụng webContents.executeJavaScript(code[, userGesture, callback]) API để thực thi mã JavaScript.

ví dụ:

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); 
}); 

Answer 3

Như đã nêu trong này https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md

In Electron, we have several ways to communicate between the main process and renderer processes. 
Like ipcRenderer and ipcMain modules for sending messages, and the remote module for RPC style communication. 

Vì vậy, bạn có thể làm theo các ví dụ trong https://github.com/electron/electron-api-demos.Bạn nên có một tập tin js cho mỗi html, trong đó bạn có thể sử dụng bất cứ lúc nào bạn muốn require

Mã trong renderer.jshttps://github.com/electron/electron-api-demos/blob/master/renderer-process/communication/async-msg.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 
}) 

Mã trong htmlhttps://github.com/electron/electron-api-demos/blob/master/sections/communication/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>