[解決済み] electronで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 モジュールがあり メインプロセス と同様に レンダラープロセス であり、同期/非同期メッセージによってこの 2 つの間の通信を可能にします。

また リモート モジュールを使用して、レンダラーからメイン プロセス API を呼び出すこともできますが、その逆を可能にするものはありません。

ユーザーのアクションに対する応答として、メインプロセスで何かを実行する必要がある場合は ipc モジュールを使って関数を呼び出し、その結果をレンダラーに返します。 ipc .

Wolfgang がコメントで提案したように、コードは実際の API (v0.37.8) を反映するように更新されました。

のスクリプト例です。 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);
});