CODEWITHSUNDEEP
javascriptnode.jselectron
Michael Bruce
Michael Bruce

Reputation: 11347

Electron webContents executeJavaScript : Cannot execute script on second on loadURL

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

Upvotes: 3

Views: 16660

Answers (1)

Rishi Tiwari
Rishi Tiwari

Reputation: 1051

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

Upvotes: 7

Related Questions