How to access DOM elements in electron?

Question

I am trying to add functionality to a button in index.html file is as follows: I have a button element in index.html

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

In main.js of the app, I have

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

But an error occurs as follows: Uncaught Exception: ReferenceError: document is not defined

Can the DOM objects be accessed while building electron apps? or is there any other alternative way that can give me the required functionality?

The main process doesn't have access to the DOM, it's the renderer that has access. [Learn the difference](https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md#differences-between-main-process-and-renderer-process) — Ben Fortune, Sep 25 '15 at 11:06

ROAL · Accepted Answer · 2016-12-06T08:01:10.260

93

DOM can not be accessed in the main process, only in the renderer that it belongs to.

There is an ipc module, available on main process as well as the renderer process that allows the communication between these two via sync/async messages.

You also can use the remote module to call main process API from the renderer, but there's nothing that would allow you to do it the other way around.

If you need to run something in the main process as a response to user action, use the ipc module to invoke the function, then you can return a result to the renderer, also using ipc.

Code updated to reflect actual (v0.37.8) API, as @Wolfgang suggested in comment, see edit history for deprecated API, if you are stuck with older version of Electron.

Example script in 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');
});

And in the main process:

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

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

edited Dec 06 '16 at 08:01

answered Sep 25 '15 at 11:29

ROAL

1,749
1
14
21

1

When I use require in index.html the following error shows up.` `Uncaught ReferenceError: require is not defined` any idea why? – ant_1618 Sep 25 '15 at 12:32
It seems you forgot to include the error. I don't currently have access to electron, but I think `require()` should be available in renderer process. Edit: OK it's now here. – ROAL Sep 25 '15 at 12:36
@ant_1618 What version of Electron are you using? Also, on what OS? – ROAL Sep 25 '15 at 12:40
using io.js v2.3.1 and Electron 0.29.1 On Linux 15.04 – ant_1618 Sep 25 '15 at 13:03
2

@ROAL: Yes indeed, it is possible to use `.once()`. Electron's IPC is a standard Node.js [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter). Also, `require('ipc')` has been depreciated, it's now `require('electron').ipcMain` and `require('electron').ipcRenderer`. – Wolfgang May 05 '16 at 19:20
Is it possible to invoke ipc.once() before ipc.send() in index.html? Otherwise you might face a race condition. – Huperniketes Sep 20 '16 at 00:35
1

@ant_1618 set nodeintegration in webpreferences when creating browserwindow – Musafiroon Aug 24 '21 at 05:45

score 31 · Answer 2 · answered Feb 11 '17 at 14:16

31

You can use webContents.executeJavaScript(code[, userGesture, callback]) API to execute JavaScript code.

for example:

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

answered Feb 11 '17 at 14:16

cuixiping

24,167
8
82
93

2

Best to never allow any type of user input or external data when doing this. – Display name Mar 17 '20 at 16:43

score 10 · Answer 3 · edited Jul 29 '18 at 16:58

As stated in this tutorial:

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>

score 1 · Answer 4 · answered Jan 27 '22 at 13:47

in my case the window was created by invoking window.open by default electron NodeIntegration is disabled, so you can't access the DOM of the other window. changing the property nativeWindowOpen to true fixed my issue.

// in main.ts
async function createWindow() {
  const win = new BrowserWindow({
    // ....
    webPreferences: {
      nativeWindowOpen: true,
    }
  })

Now i can access the window.document element when i create the window using window.open

How to access DOM elements in electron?

4 Answers4

Linked

Related