How to call function defined in preload.js from renderer process in electron

Question

In this answer it is suggested that a javascript function can be defined and attached to window in the preload.js file and then called from the renderer process (either in included renderer.js or directly as a script in the html file) using window.functionName, i.e. in preload.js:

window.myFunction = function(){
   //do something here that requires
   //ipcRenderer
}

and in index.html:

<script>
   var myButton = document.getElementById("myButtonId")
   myButton.addEventListener('click', (e) => {
      window.myFunction();
});
</script>

However, when I do it like this and click the button, I get the error message Uncaught TypeError: window.myFunction is not a function. Can someone explain to me why this error is thrown and how to define the function instead?

score 4 · Answer 1 · answered Jul 02 '21 at 05:40

Use Context Isolation and contextBridge.

Preload.js

 const { contextBridge } = require('electron')
 contextBridge.exposeInMainWorld('YourAPI',
  {
    yourFunction: () => {'Your Codes.'}
  });

yourHTML.html

<html>
    <head></head>
    <body>
        <script>
            window.YourAPI.yourFunction();
        </script>
    </body>
</html>

score 0 · Answer 2 · answered Jul 03 '21 at 16:21

Another way to resolve this without using having to use the Bridge method is by disabling ContextIsolation, though it is not advised now to ensure better security.

However, if you have legacy code and don't want to change, you can do this.

webPreferences: {
  contextIsolation: false,
  preload: path.join(__dirname, './preload.js'),
}

Set the webPreferences variable to false explicitly. By default now ContextIsolation is enabled in the newer versions of Electron

How to call function defined in preload.js from renderer process in electron

2 Answers2