在电子 html 中执行 exe 文件答案

【问题标题】：executing exe files in electron html在电子 html 中执行 exe 文件
【发布时间】：2020-03-31 12:29:01
【问题描述】：

我想创建一个简单的电子桌面应用程序，在按下 html 部分中的按钮时执行文件。不知何故，我得到了几个错误。首先，当我通过在主 js 中启用节点集成来修复它时，我得到了这个 require is not defined 错误：

"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"

node jquery 和 bootstrap 应该被正确嵌入。

这是我的 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>`

【问题讨论】：

标签： javascript jquery html electron

【解决方案1】：

对此有一篇有趣的文章：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 加载的方式，它最终导出它而不是添加到窗口全局范围。

【讨论】：

非常感谢！！！我整天都在寻找解决方案：D，但我现在留下了一条不同的错误消息：Uncaught TypeError: Cannot read property 'addEventListener' of null at html_logic.js:11
发布一个新问题：D
我认为在这里回答它不会有那么大的问题。但是，仍然非常感谢您的帮助。 :)
从技术上讲，这不是什么大问题，但在 SO 上将问题分开是一种很好的做法，以便它们可以帮助未来的用户。如果此答案解决了您的第一个问题，请将其标记为已接受。
我自己弄清楚了。我必须通过 id 删除 get 元素处的 #