Imp*_*815 2 html javascript jquery electron
我想创建一个简单的电子桌面应用程序，在按下 html 部分中的按钮时执行文件。不知何故，我收到了几个错误。首先我得到了这个 require is not defined 错误，当我通过在主 js 中启用节点集成来修复它时：
"util.js:176 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
at Object.jQueryDetection (util.js:176)
at util.js:192
at bootstrap.min.js:6
at bootstrap.min.js:6"
应该正确嵌入节点 jquery 和引导程序。
这是我的 main.js：
var execFile = require('child_process').execFile;
function chrome(){
execFile("C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", function(err, data) {
console.log(err)
console.log(data.toString());
});
};
var btn = document.getElementById("#TestBtn");
btn.addEventListener('click', chrome);
我的 html.logic.js :
const electron = require('electron');
const url = require('url');
const path = require('path');
const {app, BrowserWindow} = electron;
let mainWindow;
app.on('ready', function(){
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'mainWindow.html'),
protocol: 'file',
slashes: true,
}));
});
**and my mainwindow.html:**
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Youtube Downloader</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<h1>Youtube Downloader</h1>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Download!</button>
</div>
<input type="text" class="form-control" placeholder="Put your link in here!" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<div class="DowLs">
<ul class="list-group"><h1>Downloads:</h1>
<li class="list-group-item">Video Name<br><br>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
</div></li>
<li class="list-group-item">Video Name<br><br>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
</div></li>
<li class="list-group-item">Video Name<br><br>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div></li>
<li class="list-group-item">Video Name<br><br>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div></li>
</ul>
</div>
<button type="button" class="btn btn-dark" id="TestBtn">Dark</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="html_logic.js"></script>
</body>
</html>`
对此有一篇有趣的文章：https : //techsparx.com/nodejs/electron/load-jquery-bootstrap.html
本质上：
效果是，如果 jQuery 在 Node.js/CommonJS 环境中执行，它不会创建全局 jQuery 对象。Electron 是一个 Chrome 浏览器，它也支持 Node.js，包括 module 和 module.exports 对象，以及 require 函数等等。因此当在 Electron 下执行时，jQuery 运行第一个分支并且不会将自己添加到全局对象中，而是通过 module.exports 导出自己。
所以你需要这样做：
<script>
window.jQuery = window.$ = require('jquery');
</script>
这是因为 jQuery 加载的方式，它最终导出它而不是将它添加到 window 全局范围。