How to access DOM elements in electron?

by

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

More Related Contents:

  1. How do I check if an element is hidden in jQuery?
  2. Why does jQuery or a DOM method such as getElementById not find the element?
  3. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  4. Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
  5. Detect element content changes with jQuery
  6. How can I select an element by name with jQuery?
  7. Event handlers inside a Javascript loop – need a closure?
  8. jQuery object and DOM element
  9. Javascript get XPath of a node
  10. How to resolve the C:\fakepath?
  11. How to get the element clicked (for the whole document)?
  12. Browser-independent way to detect when image has been loaded
  13. Can I load an entire HTML document into a document fragment in Internet Explorer?
  14. Javascript – Are DOM redraw methods synchronous?
  15. How to check if an embedded SVG document is loaded in an html page?
  16. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  17. How do you set the document title in React?
  18. contentDocument for an iframe
  19. Can I change an HTML element’s type?
  20. “Cut and Paste” – moving nodes in the DOM with Javascript
  21. How to reference the caller object (“this”) using attachEvent
  22. Is it possible to programmatically catch all events on the page in the browser?
  23. Is there any way to accelerate the mousemove event?
  24. Inject CSS stylesheet as string using Javascript
  25. JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure? [duplicate]
  26. Electron – Setting up IPC communication between main and renderer processes
  27. Getting the text from a drop-down box
  28. Accessing a DOM object defined in an external SVG file
  29. Use of require(lib) versus in Electron apps
  30. Removing element with jQuery?

Leave a Comment