javascript - Electron 误差; jQuery 必须包含在 Bootstrap 的 JavaScript 之前(它是)

标签 javascript html jquery electron

您好,我有一个带有此 html 的 Electron 应用程序:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />

  <!-- jQuery --> 
  <script src="./static/jquery/jquery-3.5.1.min.js"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css" />
  <!-- Bootstrap JS -->
  <script src="./static/bootstrap/js/bootstrap.min.js"></script>
  <!-- font awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<style>
  /* expand/collapse card style */
  .card-header .fa {
    transition: .3s transform ease-in-out;
  }
  .card-header .collapsed .fa {
    transform: rotate(90deg);
  }
</style>

<body>

  <div class="card">
    <h5 class="card-header">
        <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
            <i class="fa fa-chevron-down pull-right"></i>
            Collapsible Group Item #1
        </a>
    </h5>
    <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
            officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
            wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
            excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
            you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>

  <strong>Upload Queue:</strong>
  <div id="uploadList">
  </div>

  <br><br>

  <h3>Drag and Drop Files in the Window.</h3>

  <!-- Adding Individual Renderer Process JS File -->
  <script src="index.js"></script>
</body>

</html>

你可以看到我首先包含 jquery,然后是 bootstrap 和字体很棒。但是当我运行它时,我在控制台中收到一个错误:
util.js:179 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.jQueryDetection (util.js:179)
    at util.js:195
    at bootstrap.min.js:6
    at bootstrap.min.js:6
我的 jquery 显然是在 bootstrap 之前,什么给出了?我试图让我所有的依赖项都是本地文件而不是库。

最佳答案

<head>
  <meta charset="UTF-8">
  <title>digify</title>
  <!-- css  -->
  <link rel="stylesheet" href="./src/style2.css" />


  
  <script>window.$ = window.jQuery = require('jquery');</script>
  <script>require('popper.js');</script>
  <script>require('bootstrap');</script>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./src/static/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./src/static/font-awesome/css/font-awesome.min.css">
  <!-- row reorder css -->
  <link rel="stylesheet" href="./src/static/datatables/rowReorder.dataTables.min.css">
  <link rel="stylesheet" href="./src/static/datatables/jquery.dataTables.min.css">

</head>

关于javascript - Electron 误差; jQuery 必须包含在 Bootstrap 的 JavaScript 之前(它是),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63096016/

相关文章:

javascript - 使用键盘中的箭头键禁用 map 平移

javascript - Expressjs 服务器上的 HTML 按钮运行 node.js 脚本

javascript - 更改单击事件时按钮的颜色

javascript - 尝试使用 Jquery 将 html 元素值获取到变量

javascript - 内容安全策略错误?

javascript - 理解php代码并在24小时内调用一次javascript函数

javascript - 使用 javascript 填充表格抓取页面

jquery - 用于用连字符替换字符串中所有特殊字符和空格的正则表达式

javascript - puppeteer 师夏普 : setting a fake path when loading content?

javascript - Joomla 页面 : "The type attribute is unnecessary for JavaScript resources." 的 W3C 验证