ElectronJS Jquery and IPCRenderer / It doesn't work / Can't run it together

Question

I'm trying to make a simple desktop application for my colleagues at work to use. I designed the interface and I am using webview. I removed the frame with the frame: false command, made a custom design frame, and I control the buttons with ipcrenderer. So far everything is going very well. But, I am using bootstrap in my index.html and I have to use jquery. I am using tabs partitions here.

If I do nodeintegration:false in webPreferences, the bootstrap and jquery features, namely the tabs section, work as they should. but the buttons I use ipcrenderer do not work.

Conversely, if I change it to nodeintegration: true, all my ipcrenderer buttons work correctly, but my tabs sections, ie other menus that require jquery, stop working.

How can I run both ipcrenderer processes and jquery processes together.

I've been dealing with this problem for days and it doesn't get resolved.

I tried various solution methods, but I could not get a result that works correctly. How can i solve this problem. Thank you, best regards.

index.html

<html lang="en">
<head>     
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
    <title>MY APP</title>
    <link rel="stylesheet" href="./js/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./css/electron_appstyle.css">
    <script src="./js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="./js/electron_appfunctions.js" async type="text/javascript"></script>
</head>
<body>

.....
.....
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/bootstrap/popper.min.js" async type="text/javascript"></script>
    <script src="./js/bootstrap/bootstrap.min.js" async type="text/javascript"></script>
    <script src="./js/bootstrap/bootstrap.bundle.min.js" async type="text/javascript"></script>
</body>
</html>

part of main.js

const { app, BrowserWindow, ipcMain} = require('electron');
const { join } = require('path');
const path = require('path');
function createWindow () {
    win = new BrowserWindow({
        icon: path.join(__dirname, "icon.png"),
        width: 960,
        height: 600,
        minWidth: 940,
        minHeight: 560,
        frame: false,
        resizable: true,
        autoHideMenuBar: true,
        x: 0,
        y: 0,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
            enableRemoteModule: true,
            nodeIntegration: false,
            contextIsolation: false,
            disablewebsecurity: false,
            webviewTag: true,
            allowRunningInsecureContent: false,
            allowpopups: false,
            devTools: true
        },
        show: false,
    })

    win.loadFile(join(__dirname, "src/index.html"));

    win.on("ready-to-show", () => {
        // RUN
        win.show() 
    });

}

ElectronJS Jquery and IPCRenderer / It doesn't work / Can't run it together

0 Answers0