Electron对JQuery的支持问题
最近在了解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的支持问题的更多相关文章
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
- jQuery不支持hashchange事件？
$(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...
- Electron中Jquery的引入方式
原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- 最流行的JavaScript库jQuery不再支持旧版IE
直到JQuery2.0的发布,流行的jQuery JavaScript库到了一个重要里程碑.2.0版本比前任版本在大小上缩减了12%,但是更大的新闻是,jQuery 2.0不在对IE6,7,8三个版本 ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- Touch Punch在移动设备上面增加jQuery UI的触摸支持|Jquery UI 支持移动端 触摸滑动等
jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件.这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipa ...
- jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件
支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...
- Electron与jQuery中$符号冲突的三种解决方法
在Electron工程中引用jQuery时,经常会出现以下错误: Uncaught ReferenceError: $ is not defined 解决的具体方法如下: ①.在测试的过程中(测试过1 ...
随机推荐
- Python爬虫之简单爬虫框架实现
简单爬虫框架实现 目录 框架流程 调度器url管理器 网页下载器 网页解析器 数据处理器 具体演示效果 框架流程 调度器 #导入模块 import Url_Manager import parser_ ...
- maven 依赖包找不到 （转）
1,手动添加jar包 例: maven在集成Oracle驱动的时候从远程仓库下载不下来ojdbc14 报missing artifact com.oracle:ojdbc14:jar:10.2.0.3 ...
- MySQL快速清空表数据
truncate table 可以不删除表的情况下,快速情况表数据
- select,poll.epoll区别于联系
select,poll,epoll都是IO多路复用中的模型.再介绍他们特点时,先来看看多路复用的 模型. 同其他IO的不同的是,IO多路复用一次可以等多个文件描述符.大大提高了等待数据准备好的时间的效 ...
- linux 网卡配置详情
1.配置文件/etc/hosts(本地主机ip地址映射,可以有多个别名)./etc/services(端口号与标准服务之间的对应关系)./etc/sysconfig/network(设置主机名,网关, ...
- Python中的字典和集合
一.字典(dict) 1. 概述 字典是Python唯一的映射类型. 只能使用不可变的对象(比如字符串)来作为字典的键,但是可以把不可变或可变的对象作为字典的值. 键值对在 ...
- java8学习之比较器深入
继续接着上次[http://www.cnblogs.com/webor2006/p/8331498.html]的比较器进行探究,上次排序采用是的利用Collections.sort()进行的,下面采用 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|（19）|多线程]
[易学易懂系列|rustlang语言|零基础|快速入门|(19)|多线程] 实用知识 多线程 我们今天来讲讲Rust中的多线程. 我直接来看看代码: use std::thread; use std: ...
- 2017 趋势科技 研发4.26（offer）
南京趋势科技外企(offer) 笔试 在华科线下笔试的,推荐多参加线下笔试,因为相对难度会低一些,好进一些. 当时笔试的估计只有60几个,然后选择题感觉有的不会,编程简单. 第二天去面试的时候,hr小 ...
- 【leetcode】Trips and Users
The Trips table holds all taxi trips. Each trip has a unique Id, while Client_Id and Driver_Id are b ...