最近在了解Electron框架写应用，偶然发现在html中使用<script src="./jquery.js"></script>这种方式引入JQuery，明明引入了，程序中却始终报错显示：Uncaught ReferenceError: $ is not defined。

经查阅资料，发现不仅JQuery不能用，RequireJS、Meteor、AngularJS也不能使用。

原因是Electron 在运行环境中引入了 Node.js，默认启用了Node.js的require模块，而这些框架为了支持commondJS标准，当Window中存在require时，会启用模块引入的方式。所以在 DOM 中有一些额外的变量，比如module、exports和require。这导致了许多库不能正常运行，因为它们也需要将同名的变量加入运行环境中。

解决方法有很多，官方的解决方法是1、2：

1、禁用Node.js：若不使用Node.js则通过在主进程中禁用Node.js来解决。

        // 在主进程中

        var mainWindow = new BrowserWindow({

            webPreferences: {

                nodeIntegration: false

            }

        });

 2、变量重命名：假如依然需要使用 Node.js 和 Electron 提供的 API，则需要在引入那些库之前将这些变量重命名。

        <head>

            <script>

                // 重命名 Electron 提供的 require

                window.nodeRequire = require;

                delete window.require;

                delete window.exports;

                delete window.module;

            </script>

            <script type="text/javascript" src="jquery.js"></script>

        </head>

这样，就可以用nodeRequire来使用node模块，又能使用jQUery了，但这种方法不适合web项目，在web里将无法正常浏览。

 3、采用Node.js的require引入：（有些时候不要带后缀名.js）

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

4、自定义$、jQuery变量

        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

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

      5、

<!-- Insert this line above script imports置于引入jQuery之前--> 

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

<!-- normal script imports etc 引入JQuery--> 

<script src="scripts/jquery.min.js"></script> 

 <!-- Insert this line after script imports置于引入jQuery之后（本人测试可以不加下面这句） --> 

<script>if (window.module) module = window.module;</script>

        6、去掉框架中的模块引入判断代码：针对JQuery

将JQuery中的如何代码

!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}

改为

!function(a,b){b(a)}

Electron对JQuery的支持问题的更多相关文章

  1. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  2. jQuery不支持hashchange事件？

    $(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...

  3. Electron中Jquery的引入方式

    原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...

  4. 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  5. 最流行的JavaScript库jQuery不再支持旧版IE

    直到JQuery2.0的发布,流行的jQuery JavaScript库到了一个重要里程碑.2.0版本比前任版本在大小上缩减了12%,但是更大的新闻是,jQuery 2.0不在对IE6,7,8三个版本 ...

  6. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  7. Touch Punch在移动设备上面增加jQuery UI的触摸支持|Jquery UI 支持移动端 触摸滑动等

    jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件.这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipa ...

  8. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

  9. Electron与jQuery中$符号冲突的三种解决方法

    在Electron工程中引用jQuery时,经常会出现以下错误: Uncaught ReferenceError: $ is not defined 解决的具体方法如下: ①.在测试的过程中(测试过1 ...

随机推荐

  1. 韦东山嵌入式Linux学习笔记08--中断体系结构

    中断是什么? 举个栗子, 系统怎么知道你什么时候插入鼠标这个设备? 可以有两种处理方式: 1. 查询方式: 轮询去检测是否有设备插入; 2. 中断的方式 当鼠标插入这个事件发生时, 置位某个寄存器,告 ...

  2. 格式化json扩展

    json-handle 直接在chrome应用商店搜索JSON-handle或者去github搜索可用插件即可

  3. windows下双击可运行的Java软件打包方案（转）

    出处: http://www.cnblogs.com/shiyangxt/ 刚开始学Java的时候,挺郁闷的,写出来的java类文件,需要dos下编译,然后再dos下运行看效果.这使初学者常常 觉得麻 ...

  4. mysql 在gtid环境下缺少一部分binlog部署从库

    我的环境: 有两台linux服务器 一台是192.168.1.1  mysql  端口3301 一台是192.168.1.2   mysql 端口3303 要讨论如何恢复从库,我们得先来了解如下一些概 ...

  5. 【HDU6703】array

    题目大意:给定一个 N 个数字的排列,需要支持两种操作:对某个位置的数字 + 1e7,查询区间 [1, r] 中最小的不等于区间中任何一个数字的数. 题解:本题证明了对于 50W 的数据来说,\(O( ...

  6. 【CF1181C】Flag

    题目大意:给定一个 N*M 的矩阵,定义一个矩形区域为一个"国旗",满足:矩形区域可以按行划分成三个高度相同的部分,其中每一个部分中的颜色完全相同,第一部分的颜色与第二部分颜色不同 ...

  7. 【hiho1035】自驾旅行III

    题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,树边有两个权值,分别为走路的代价和开车的代价.有一个旅行者开车要从根节点出发,必须遍历给定点集,可以在任何位置停止旅行,有车时可以选择开车或 ...

  8. CSS如何修改placeholder样式

    项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置: 原文发布与我的个人博客>> 首先来看一下chrome默认的input ...

  9. Acwing-280-陪审团(背包dp?)

    链接: https://www.acwing.com/problem/content/282/ 题意: 在一个遥远的国家,一名嫌疑犯是否有罪需要由陪审团来决定. 陪审团是由法官从公民中挑选的. 法官先 ...

  10. Acwing-121-赶牛入圈(二分, 二维前缀和,离散化)

    链接: https://www.acwing.com/problem/content/123/ 题意: 农夫约翰希望为他的奶牛们建立一个畜栏. 这些挑剔的畜生要求畜栏必须是正方形的,而且至少要包含C单 ...