executeJavaScript gives no errors but won't execute code

Question

Okay, as I understand things this should execute the code specified inside executeJavaScript() inside my renderer process. When I include only a console.log() to be executed, things work flawlessly and I see the output inside the developer console. My question then is, what might be causing this to not execute? I've tried adding a console.log() outside of my conditional and still nothing nothing appears inside developer console. What's more depending on where I insert the console.log() errors are thrown telling me there's an unknown identifier.

Without posting the rest of my project, is there anything obviously wrong or broken about my understanding of this function? This seems like it should be pretty straight forward.

const electron = require('electron')
const remote = require('electron').remote
const ipc = require('electron').ipcRenderer
const url = require('url')
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow



var MainWindow;
app.on('ready', function()
{
    MainWindow = new BrowserWindow({
        width: 1024, 
        height: 768, 
        backgroundColor : '123355',
        frame: false,
        resizable: true,
        movable: true,
        show: false
    })
    var win = MainWindow.webContents


    MainWindow.on('ready-to-show', () => {
        MainWindow.show()
        console.log('Ready to go!')
    })

    MainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true

    }))


        win.executeJavaScript("document.onreadystatechange = function ()" +
        "{" +
                "document.getElementById('minimize-app').addEventListener('click', function (e) {" +
                    "var window = BrowserWindow.getFocusedWindow();" +
                    "window.minimize();" +
                "});" +
                "document.getElementById('maximize-app').addEventListener('click', function (e) {" +
                    "var window = BrowserWindow.getFocusedWindow();" +
                    "window.maximize();" +
                "});" +
                "document.getElementById('close-app').addEventListener('click', function (e) {" +
                    "var window = BrowserWindow.getFocusedWindow();" +
                    "window.close();" +
                "});" +
        "}"
        );


});

yes, let me post the rest of the javascript, I guess it can't hurt. — Carl
– Carl, Commented Jul 18, 2018 at 16:08
What's more depending on where I insert the console.log() errors are thrown telling me there's an unknown identifier - please, don't paraphrase the errors. If there are error messages, please, post them and specify where exactly they happen, i.e. where you insert console.log. — Estus Flask
– Estus Flask, Commented Jul 18, 2018 at 16:38
tommyO, I've added the rest of the code from my JS file. win is declared up near the top of the file, right after app.on() — Carl
– Carl, Commented Jul 18, 2018 at 16:43

pergy · Accepted Answer · 2018-07-25 14:30:57Z

1

You should call this when DOM is ready (that is 'dom-ready')

const {app, BrowserWindow} = require('electron')
const path = require('path')

let mainWindow = null
app.once('ready', () => {
  mainWindow = new BrowserWindow({})
  const executeOnHTML = () => {
    mainWindow.webContents.executeJavaScript(`
      document.getElementById('minimize-button').addEventListener('click', function (e) {
        const { remote } = require('electron')
        var window = remote.BrowserWindow.getFocusedWindow()
        window.minimize()
      })
    `)
  }
  mainWindow.webContents.once('dom-ready', executeOnHTML)
  mainWindow.loadURL(path.join(__dirname, 'index.html'))
})

Also, there are a lot of different ways to do the same instead of putting everything in one file.

You can define HTML behavior in a js referred from HTML (<script src=...>)
You can use IPC to communicate between Main and Renderer process

I also suggest you to read about electron's Processes

answered Jul 25, 2018 at 14:30

pergy

5,5511 gold badge26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carl Over a year ago

Sorry I hadn't checked this question in a while since I already found a solution. I ended up like you suggested splitting the code up into two parts, one loaded as part of my DOM and the other loaded in my main process. Then I used IPC to send messages between the two processes. This solution seemed relatively intuitive to me since I've worked with QT before and dealt with signal/slot event handling. The solution you provided is much closer to what I was originally looking for (delegating everything from one process) but I think the alternate solutions may actually be better.

Collectives™ on Stack Overflow

executeJavaScript gives no errors but won't execute code

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related