3

I am testing out Electron and specifically working with executeJavaScript. My project uses a POST request to sign into a website, then does a bit of work and loads a second URL using the same session. In this second URL, I need to execute JS but I am not sure what I am doing wrong.

In this example I created a dumbed down version that simulates going to two URL's and executing JS on the second. Any ideas on what is going on here?

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

let win;

function createWindow() {

  win = new BrowserWindow({width: 1000, height: 600})
  win.openDevTools();

  // First URL
  win.loadURL('https://www.google.com')

  // Once dom-ready
  win.webContents.once('dom-ready', () => {

    // THIS WORKS!!!
    win.webContents.executeJavaScript(`
      console.log("This loads no problem!");
    `)

    // Second URL
    win.loadURL('https://github.com/electron/electron');

    // Once did-navigate seems to function fine
    win.webContents.once('did-navigate', () => {

      // THIS WORKS!!! So did-navigate is working!
      console.log("Main view logs this no problem....");

      // NOT WORKING!!! Why?
      win.webContents.executeJavaScript(`

        console.log("I canot see this nor the affects of the code below...");

        const form = document.querySelectorAll('form.js-site-search-form')[0];

        const input = form.querySelectorAll('input.header-search-input')[0]

        input.value = 'docs';

        form.submit();

      `)

    })
  })
}

app.on('ready', createWindow );

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

1 Answer 1

7

It is because you are trying to run the Javascript before the dom-ready event.

Try executing your javascript after this event is completed like below

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

let win;

function createWindow() {

    win = new BrowserWindow({ width: 1000, height: 600 })
    win.openDevTools();

    // First URL
    win.loadURL('https://www.google.com')

    // Once dom-ready
    win.webContents.once('dom-ready', () => {

        // THIS WORKS!!!
        win.webContents.executeJavaScript(`
      console.log("This loads no problem!");
    `)

        // Second URL
        win.loadURL('https://github.com/electron/electron');

        // Once did-navigate seems to function fine
        win.webContents.once('did-navigate', () => {

            // THIS WORKS!!! So did-navigate is working!
            console.log("Main view logs this no problem....");
            win.webContents.once('dom-ready', () => {
                // NOT WORKING!!! Why?
                win.webContents.executeJavaScript(`

        console.log("I canot see this nor the affects of the code below...");

        const form = document.querySelectorAll('input.js-site-search-form')[0];

        const input = form.querySelectorAll('input.header-search-input')[0]

        input.value = 'docs';

        form.submit();

      `)

            })
        });
    })
    }

    app.on('ready', createWindow);

    app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
            app.quit();
        }
    });
Sign up to request clarification or add additional context in comments.

4 Comments

Yes, this does seem to fix it. I could have sworn I tried dom-ready for second trial as well. I will check with my application and respond back. I hope this isn't another embarrassment from coding too much in a day :)
AAAAAnnnd I was a fool. I changed did-navigate and dom-ready for the second URL, but never tried did-navigate followed by another dom-ready. Thank you for the quick response.
It happens.. :)
hi I had same issue, create a function and call it where you write // NOT WORKING!!! Why?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.