remote open nativewindowopen icon electronjs browserwindow agregar jquery electron

jquery - open - electronjs browserwindow



Electrón: jQuery no está definido (18)

¡Me enfrento al mismo problema y esto funcionó para mí!

Instale jQuery usando npm

$ npm install jquery

Luego incluya jQuery de una de las siguientes maneras.

Usando la etiqueta de script

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

Usando Babel

import $ from ''jquery'';

Usando Webpack

const $ = require(''jquery'');

Problema: mientras desarrolla usando Electron, cuando intenta usar cualquier complemento JS que requiera jQuery, el complemento no encuentra jQuery, incluso si carga en la ruta correcta usando etiquetas de script.

Por ejemplo,

<body> <p id="click-me">Click me!</p> ... <script src="node_modules/jquery/dist/jquery.min.js"></script> //jQuery should be loaded now <script>$("#click-me").click(() => {alert("Clicked")});</script> </body>

Ejecutar este código anterior no funcionaría. De hecho, abra DevTools, vaya a la vista Consola y haga clic en el elemento <p> . Debería ver que la function $ is not defined o algo por el estilo.

1.Instale jQuery usando npm.

npm install jquery --save

2)

<!--firstly try to load jquery as browser--> <script src="./jquery-3.3.1.min.js"></script> <!--if first not work. load using require()--> <script> if (typeof jQuery == "undefined"){window.$ = window.jQuery = require(''jquery'');} </script>

Acabo de encontrar este mismo problema

npm install jquery --save

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

trabajó para mi

Como se ve en https://github.com/atom/electron/issues/254 el problema se debe a este código:

if ( typeof module === "object" && typeof module.exports === "object" ) { // set jQuery in `module` } else { // set jQuery in `window` }

El código jQuery "ve" que se está ejecutando en un entorno CommonJS e ignora la window .

La solución es realmente fácil , en lugar de cargar jQuery a través de <script src="..."> , debe cargar así:

<script>window.$ = window.jQuery = require(''./path/to/jquery'');</script>

Nota: el punto antes de la ruta es obligatorio , ya que indica que es el directorio actual. Además, recuerde cargar jQuery antes de cargar cualquier otro complemento que dependa de él .

Creo que entiendo su lucha, lo resolví un poco diferente. Utilicé el cargador de scripts para mi archivo js que incluye jquery. El cargador de scripts toma su archivo js y lo adjunta a la parte superior de su archivo vendor.js, hizo la magia para mí.

https://www.npmjs.com/package/script-loader

después de instalar el cargador de scripts, agréguelo a su archivo de inicio o aplicación

import ''script! ruta / your-file.js'';

Esto funciona para mi.

<script languange="JavaScript"> if (typeof module === ''object'') {window.module = module; module = undefined;} </script>

Cosas para considerar:

1) Ponga esto en la sección justo antes </head>

2) Incluya Jquery.min.js o Jquery.js justo antes de la etiqueta </body>

Im building y Angular App con electron, mi solución fue la siguiente:

index.html

<script> if ( typeof module === "object" && typeof module.exports === "object" ) { window.$ = window.jQuery = require(''jquery''); } </script>

angular.json

"scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

Entonces, Jquery se carga desde angular.json si está en el navegador, de lo contrario, si se trata de una aplicación construida con electrones, necesitará un módulo.

Si desea importar jquery en index.html en lugar de importar desde angular.json, use la siguiente solución:

<script src="path/to/jquery"></script> <script> if ( typeof module === "object" && typeof module.exports === "object" ) { window.$ = window.jQuery = require(''jquery''); } </script>

Otra forma de escribir <script>window.$ = window.jQuery = require(''./path/to/jquery'');</script> es:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>

Para este problema, use JQuery y otros js igual que está usando en la página web. Sin embargo, Electron tiene integración de nodos, por lo que no encontrará sus objetos js. Debe configurar module = undefined hasta que sus objetos js se carguen correctamente. Ver ejemplo a continuación

<!-- Insert this line above local script tags --> <script>if (typeof module === ''object'') {window.module = module; module = undefined;}</script> <!-- normal script imports etc --> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!-- Insert this line after script tags --> <script>if (window.module) module = window.module;</script>

Después de importar como se indica, podrá usar JQuery y otras cosas en electrón.

Preguntas frecuentes sobre electron:

http://electron.atom.io/docs/faq/

No puedo usar jQuery / RequireJS / Meteor / AngularJS en Electron.

Debido a la integración de Node.js de Electron, hay algunos símbolos adicionales insertados en el DOM como módulo, exportaciones, requieren. Esto causa problemas a algunas bibliotecas ya que desean insertar los símbolos con los mismos nombres.

Para resolver esto, puede desactivar la integración de nodos en Electron:

// En el proceso principal.

let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } });

Pero si desea mantener las capacidades de usar Node.js y Electron API, debe cambiar el nombre de los símbolos en la página antes de incluir otras bibliotecas:

<head> <script> window.nodeRequire = require; delete window.require; delete window.exports; delete window.module; </script> <script type="text/javascript" src="jquery.js"></script> </head>

Puede poner node-integration: false opciones internas node-integration: false en BrowserWindow.

por ejemplo: window = new BrowserWindow({''node-integration'': false});

Si está utilizando Angular2, puede crear un nuevo archivo js con este código:

// jquery-electron.js if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) { window.jQuery = window.$ = module.exports; }

y colóquelo justo después de jquery path, en .angular-cli.json:

"scripts": [ "../node_modules/jquery/dist/jquery.js", "assets/js/jquery-electron.js", ... ... ]

funcionó para mí usando el siguiente código

var $ = require(''jquery'')

ok, aquí hay otra opción, si quieres que un pariente incluya ...

<script> window.$ = window.jQuery = require(''./assets/scripts/jquery-3.2.1.min.js'') </script>

puedes probar el siguiente código:

mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration:false, } });

Una solución agradable y limpia.

  1. Instale jQuery usando npm. ( npm install jquery --save )
  2. Úselo: <script> let $ = require("jquery") </script>

Una solución mejor y más genérica IMO:

<!-- Insert this line above script imports --> <script>if (typeof module === ''object'') {window.module = module; module = undefined;}</script> <!-- normal script imports etc --> <script src="scripts/jquery.min.js"></script> <script src="scripts/vendor.js"></script> <!-- Insert this line after script imports --> <script>if (window.module) module = window.module;</script>

Beneficios

  • Funciona tanto para el navegador como para el electrón con el mismo código.
  • Soluciona problemas para TODAS las bibliotecas de terceros (no solo jQuery) sin tener que especificar cada una
  • Script Build / Pack Friendly (es decir, Grunt / Gulp todos los scripts en vendor.js)
  • NO requiere node-integration sea ​​falsa

fuente here