Electron App Jquery 模块未加载

Question

我在电子上加载 jquery 时遇到问题。

问题只存在于 main.js 我把

mainWindow.loadURL('http://localhost:3000/menu');

然后我发回 menu.html

然而，当我使用这种方法时 Jquery 工作正常

 mainWindow.loadURL('ile://' + __dirname + '/menu.html');

我需要它才能使用本地主机工作。

Answer 1

这是一个已知问题。这是因为 JQuery 自动感知 node.js 的存在 - Electron 向浏览器添加了 node.js 上下文，因此 JQuery 变得混乱。

最好的方法是通过 npm 安装 JQuery，使用 electron-rebuild 然后将 html 文件更改为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Electron App</title>

  <link href="stylesheets/main.css" rel="stylesheet" type="text/css">
    <link href="./node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">

  <script src="helpers/context_menu.js"></script>
  <script src="helpers/external_links.js"></script>

</head>
<body>

  <div class="container">
    <h1 id="greet"></h1>
    <p class="subtitle">
      Welcome to <a href="http://electron.atom.io" class="js-external-link">Electron</a> app running on this magnificent <strong id="platform-info"></strong> machine.
    </p>
    <p class="subtitle">
      You are in <strong id="env-name"></strong> environment.
    </p>
        <div class="jumbotron">
            <h1>Bootstrap Test</h1>
            <p>
                Some content that should be in a Bootstrap "jumotron" box.
                If it isn't, check your html code to make sure that the Bootstrap css is loaded.
                Also check the dev console in the app to look for errors.
            </p>
        </div>
    </div>

    <script>window.$ = window.jQuery = require('jquery');</script>
    <script src="app.js"></script>

</body>
</html>

这是一个标准的样板文件，但带有特殊的 JQuery 加载程序脚本和 app.js 加载程序，以防您在需要 jquery 的普通应用程序脚本中执行任何操作- 例如，加载 Twitter Bootstrap 现在可以通过使用 npm 安装 bootstrap，执行 electron-rebuild，然后在 app.js:

中使用它来完成

import bootstrap from 'bootstrap';

Electron App Jquery 模块未加载

Electron App Jquery Module not loading

javascript

jquery

node.js

atom-editor

electron