How to access jquery from the render process inside the preload script on Electron

Question

I configured the Node integration to false in my window because, as described in the documentation, disabling is a good practice.

I want to access the jQuery of my render process in my preload script, but I don't know How I can do this.

Is it possible to activate a modal (for example) after some event occurs in the preload script?

Link to my example code in Github: https://github.com/JhonatanRSantos/Sample

What is the purpose of accessing JQuery in preload script. Since this runs before loading the HTML document. I there any requirement? — Janith, Mar 07 '19 at 09:38

score 0 · Accepted Answer · answered Mar 07 '19 at 21:40

As Janith said, you don't need to use a preload script. Here is a working sample based on your Github repo :

Index.html - in HEADER part, modify like this :

<script>window.$ = window.jQuery = require('jquery');</script>
<script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Note that you have to use the path ./node_modules/popper.js/dist/umd/popper.min.js or you will get an error in the console (see popper.js in bootstrap 4 gives SyntaxError Unexpected token export)

Index.html - FOOTER, add :

<script src="./index.js"></script>

Rename preload.js to index.js

index.js can be :

console.log('Preload.js');
setTimeout(() => {
    console.log('Open Boostrap Modal');
    $('#myModal').modal('show');
}, 5000);

and finally, main.js can be :

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

let createWindow = () => {
    let win = new BrowserWindow({
        width: 800,
        height: 500,
        center: true,
        resizable: false,
        show: false
    });
    win.setMenu(null);
    const mainUrl = url.format({ // https://electronjs.org/docs/api/browser-window#winloadurlurl-options
        protocol: 'file',
        slashes: true,
        pathname: path.join(__dirname, 'index.html')
      })
    win.loadURL(mainUrl);
    win.once('ready-to-show', () => {
        win.show();
        win.webContents.openDevTools();
    });
    win.on('closed', () => {
        win = null;
    });
};
app.on('ready', createWindow);

I made a pull request to your repo to get changes.

How to access jquery from the render process inside the preload script on Electron

1 Answers1