电子:jQuery未定义

2020/10/31 15:12 · jquery ·  · 0评论

问题:在使用Electron开发时,当您尝试使用任何需要jQuery的JS插件时,即使您使用脚本标签加载了正确的路径,该插件也找不到jQuery。

例如,

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

在上面运行此代码将不起作用。实际上,打开DevTools,转到“控制台”视图,然后单击该<p>元素。您应该看到function $ is not defined那种效果。

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>

好处

  • 使用相同的代码适用于浏览器和电子产品
  • 修复了所有第三方库(不仅仅是jQuery)的问题,而无需指定每个库
  • 脚本构建/打包友好(例如,将所有脚本Grunt / Gulp到vendor.js中)
  • 不需要node-integration为假

来源在这里

https://github.com/atom/electron/issues/254所示,此问题是由于以下代码引起的:

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

jQuery代码“看到”它在CommonJS环境中运行并忽略window

该解决方案确实很简单,而不是通过加载jQuery <script src="...">,您应该像这样加载:

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

注意: 路径前的点是必需的,因为它指示它是当前目录。另外,请记住在加载任何其他依赖jQuery的插件之前先加载jQuery

电子常见问题解答:

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

我不能在Electron中使用jQuery / RequireJS / Meteor / AngularJS。

由于Electron的Node.js集成,因此在DOM中插入了一些额外的符号,例如模块,导出,需求。由于某些库要插入具有相同名称的符号,因此这会引起问题。

要解决此问题,您可以在Electron中关闭节点集成:

//在主过程中

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

但是,如果要保持使用Node.js和Electron API的能力,则必须在包含其他库之前重命名页面中的符号:

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

另一种书写方式<script>window.$ = window.jQuery = require('./path/to/jquery');</script>是:

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

刚遇到同样的问题

npm install jquery --save

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

为我工作

您可以将node-integration: false选项放在BrowserWindow上。

例如: window = new BrowserWindow({'node-integration': false});

一个不错且干净的解决方案

  1. 使用npm安装jQuery。npm install jquery --save
  2. 用它: <script> let $ = require("jquery") </script>

我面临同样的问题,这对我有用!

使用npm安装jQuery

$ npm install jquery

然后以下列方式之一包含jQuery。

使用脚本标签

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

使用Babel

import $ from 'jquery';

使用Webpack

const $ = require('jquery');
<script>
  delete window.module;
</script>

在导入jquery之前,您一切顺利。更多信息在这里

我想我理解您的努力,我以不同的方式解决了它。我为包括jQuery在内的js文件使用了脚本加载器。脚本加载器将您的js文件附加到您的vendor.js文件的顶部,这对我来说是神奇的。

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

安装脚本加载程序后,将其添加到启动文件或应用程序文件中。

导入'script!path / your-file.js';

好的,这是另一个选择,如果您想要亲属包括...

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

如果您使用的是Angular2,则可以使用以下代码创建一个新的js文件:

// jquery-electron.js

if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
      window.jQuery = window.$ = module.exports;
}

并将其放在.angular-cli.json中的jquery路径之后:

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

即时通讯和带电子的Angular App,我的解决方案是:

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

因此,如果在浏览器上,则从angular.json加载Jquery,否则,如果它是电子构建的应用程序,则需要模块。

如果要在index.html中导入jquery而不是从angular.json导入,请使用以下解决方案:

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

使用以下代码为我工作

var $ = require('jquery')

1.使用npm安装jQuery。

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>

这对我有用。

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

注意事项:

1)将其放在前面的部分中 </head>

2)在</body>标记之前添加Jquery.min.js或Jquery.js

只需使用以下命令安装Jquery。

npm install --save jquery

之后,请将belew行放在要使用Jquery的js文件中

let $ = require('jquery')

您可以尝试以下代码:

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

对于此问题,请使用与Web页面中相同的方式使用JQuery和其他js。但是,Electron具有节点集成功能,因此将找不到您的js对象。您必须进行设置,module = undefined直到正确加载js对象。见下面的例子

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

像给定的输入后,您将可以JQuery在电子中使用和其他东西。

本文地址:http://jquery.askforanswer.com/dianzijqueryweidingyi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!