전자에서 DOM 요소에 액세스하는 방법은 무엇입니까?

전자에서 DOM 요소에 액세스하는 방법은 무엇입니까?

---

index.html파일 의 버튼에 기능을 추가하려고하는데 다음과 같습니다. 버튼 요소가 있습니다.index.html

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

에서 main.js응용 프로그램의 내가있다

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

그러나 다음과 같은 오류가 발생합니다. Uncaught Exception: ReferenceError: document is not defined

전자 앱을 빌드하는 동안 DOM 개체에 액세스 할 수 있습니까? 또는 필요한 기능을 제공 할 수있는 다른 대체 방법이 있습니까?

---

DOM은 기본 프로세스에서 액세스 할 수 없으며 속한 렌더러에서만 액세스 할 수 있습니다.

동기화 / 비동기 메시지를 통해이 둘 간의 통신을 허용하는 렌더러 프로세스 뿐만 아니라 메인 프로세스ipc 에서 사용할 수 있는 모듈이 있습니다 .

원격 모듈을 사용하여 렌더러에서 기본 프로세스 API를 호출 할 수도 있지만 다른 방법으로 수행 할 수있는 방법은 없습니다.

사용자 작업에 대한 응답으로 기본 프로세스에서 무언가를 실행해야하는 경우 ipc모듈을 사용 하여 함수를 호출 한 다음을 사용하여 결과를 렌더러에 반환 할 수 있습니다 ipc.

@Wolfgang이 주석에서 제안한대로 실제 (v0.37.8) API를 반영하도록 코드가 업데이트되었습니다. Electron의 이전 버전을 사용하는 경우 사용되지 않는 API의 편집 기록을 참조하세요.

의 예제 스크립트 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');
});

그리고 주요 과정에서 :

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

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

---

당신은 사용할 수 있습니다 webContents.executeJavaScript (코드 [userGesture, 콜백]) 자바 스크립트 코드를 실행하기 위해 API를.

예를 들면 :

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

---

이 튜토리얼 에서 언급 한대로 :

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

So you can follow the example in https://github.com/electron/electron-api-demos. You should have a js file for each html. In that js file, you can use require anytime you want.

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>

참고URL : https://stackoverflow.com/questions/32780726/how-to-access-dom-elements-in-electron