Integrate jQuery into a electron app
Solution 1
While using electron, some additional symbols are also inserted into DOM causing problems. So, you can use jquery as follow
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
Notice the code inside "onload".
Solution 2
When you call require
inside index.js
, or the main process, it's looking for the node module. So you'll need to install jQuery
via npm and save it as a dependency in your apps package.json file.
npm install jquery --save
Then your index.js
should theoretically see it just fine using
let $ = require('jquery');
mainWindow.$ = $;
Refer to the Node.JS section for installing jQuery. This is what Electron uses.
--
OLD ANSWER
Inside your main.html
, just include the JavaScript like you would any traditional JS file.
<script src="./jquery.min.js"></script>
Solution 3
To integrate jQuery
into your Electron Application follow these simple steps
Step 1: Run in terminal
npm install jquery --save
Step 2: Add this line to your angular.json
or angular-cli.json
file
"build": {
"options": {
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js", //add this line
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
...
}
}
Step 3: Finally add this line to your index.html
file
<!-- Need this for jQuery electron -->
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {
window.module = module;
module = undefined;
}</script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
</head>
You can also use this template
omu_negru
Software developer currently working for www.eloquentix.com, with experience in embedded development, distributed computing and machine learning
Updated on June 11, 2022Comments
-
omu_negru almost 2 years
I'm trying to add jquery functionality to a desktop app written in electron Using the electron-quick-start repo i'm adding the downloaded jquery file to the
main.html
file like so:<script> require("./jquery.min.js"); </script>
or so:
<script>window.$ = window.jQuery = require('./jquery.min.js');</script>
Then in the
index.js
file i'm adding code in thecreateWindow
function, since that seems the proper place, but to be honest any place i try gets me the same error more or less.mainWindow.$
isundefined
and the same goes forBrowserWindow
andapp
mainWindow
is defined inside thecreateWindow
function like so:mainWindow = new BrowserWindow({width: 800, height: 600})
and BrowserWindow is declared on top of the file like so:
const BrowserWindow = electron.BrowserWindow
Any idea where i'm going wrong, what declarations i should change/add?
Thanks in advance
-
omu_negru almost 8 yearsthat doesn't seem to solve the issue. Besides, i thought the require statement already took care of that. And the issue is with visibility inside the index.js file. If i add a console.log($) statement after the require statement i get what i would expect. It's just that the visibility does not translate to the index.js file
-
Shakespeare almost 8 years@omu_negru Sorry I misunderstood what you were asking. I've updated my answer with the steps that should resolve your issue. Let me know if it doesn't work
-
omu_negru almost 8 yearsThanks, but this is causing the app to throw another exception
require(...).jsdom(...).createWindow is not a function
-
Shakespeare almost 8 years@omu_negru Could you share the code of your
index.js
? Not too sure why that would be an error -
Shakespeare almost 8 years@omu_negru also, do you want me asking why you want jQuery available in your main process?
-
TimoSolo over 7 yearsnote, it should be
npm install jquery --save
(lowercase) to get the latest version of jquery -
adamj over 6 years
jQuery requires a window with a document
unfortunately, none of the answers I've found on any website have worked.