web-dev-qa-db-ja.com

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

Electronアプリを構築中にDOMオブジェクトにアクセスできますか？または、必要な機能を提供できる他の方法はありますか？

javascriptdomelectron
55
ant_1618

DOMは、メインプロセスではnotアクセスできますが、所属するレンダラーでのみアクセスできます。

同期/非同期メッセージを介したこれら2つの間の通信を可能にする メインプロセス および レンダラープロセス で利用可能なipcモジュールがあります。

remote モジュールを使用してレンダラーからメインプロセス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);
});
71
ROAL

webContents.executeJavaScript（code [、userGesture、callback]） APIを使用してJavaScriptコードを実行できます。

例えば：

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

このチュートリアル で述べたように：

Electronでは、メッセージを送信するためのipcRendererとipcMainモジュール、RPCスタイルの通信用のリモートモジュールなど、メインプロセスとレンダラープロセス間で通信するいくつかの方法があります。

https://github.com/electron/electron-api-demos の例に従うことができます。 jsごとにhtmlファイルが必要です。そのjsファイルでは、requireをいつでも使用できます。

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

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>
6
onmyway133