Electron App Jquery Module not loading

Question

I have a problem when loading jquery on electron.

The problem only exists when on main.js I put

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

and I send back the menu.html

however, when I use this method Jquery works fine

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

I need it to work using localhost.

Answer 1

This is a known problem. It is because JQuery auto-senses the presence of node.js - Electron adds a node.js context to the browser so JQuery gets confused.

The best approach is to install JQuery via npm, use electron-rebuild then change your html file to look like:

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

This is a standard boilerplate but with the special JQuery loader script and app.js loader moved to after that in case you are doing anything in your normal app script that requires jquery - for example, loading Twitter Bootstrap can now be done by using npm to install bootstrap, doing electron-rebuild , then using this in your app.js:

import bootstrap from 'bootstrap';

Electron App Jquery Module not loading

Question

1 answers

solution1
1 ACCPTED 2016-04-01 10:49:13

Electron App Jquery Module not loading

Question

1 answers

solution1 1 ACCPTED 2016-04-01 10:49:13

solution1
1 ACCPTED 2016-04-01 10:49:13