我正在尝试使用电子小提琴将 jquery 与电子框架一起使用。 但是 jquery 似乎无法正常工作并且动画未执行。 示例如下：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1
main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
<script>window.$ = window.jQuery = require('https://code.jquery.com/jquery-3.3.1.slim.min.js');</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
单击按钮后没有任何反应。
通常您会通过
npm install jquerynode_modulesrenderer.jswindow.$ = window.jQuery = require('jquery');
属于 renderer.js 内部。这样您就可以在本地使用它，并且 yiu 不再依赖于外部 CDN。
2022 年。这就是我让它发挥作用的方式。
安装JQuery
npm install jquery --save
使用
scriptindex.htmlsrcnode_modules <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
现在 JQuery 将在渲染器进程中以
$renderer.js由于您启用了nodeIntegration，因此 jQuery 库 (
"object" == typeof module && "object" == typeof module.exports!function(a, b) {
"object" == typeof module && "object" == typeof module.exports
? module.exports = a.document
? b(a, !0)
: function(a) {
if (!a.document)
throw new Error("jQuery requires a window with a document");
return b(a);
}
: b(a);
}(window, function(a, b) {
// Library implementation here
});