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

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

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

我个人还是比较喜欢使用第三种,简单代码少

时间: 2024-10-09 00:13:58

折腾Electron对JQuery的支持的相关文章

jQuery所支持的css样式

jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop

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

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

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

jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件.这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipad,iphone和 Android上并不能正常工作.因为jQuery UI监听的是mouseover,mousemove和mouseout事件,不是触摸事件,touchstart,touchmove和 touched. 为了解决这个问题,这里我们介绍jQuery UI Touch Punch类库,它

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

在Electron工程中引用jQuery时,经常会出现以下错误: Uncaught ReferenceError: $ is not defined 解决的具体方法如下: ①.在测试的过程中(测试过1.10.1,以及当前最新的3.2.1版本都不行),发现只要使用2.03版本的jQuery或者2.2.0版本的jQuery,就不会出现$未定义的情况. ②.使用jQuery原有的关键字jQuery()来替代$(),或者自定义关键字. <script type="text/javascript&q

jquery.Jcrop中解决jQuery不支持$.browser的办法

在使用jquery.Jcrop的过程中,出现: TypeError: $.browser is undefined opt.trackDocument = $.browser.msie ? false : true; 由于使用的是jquery-1.11.2.min.js,不支持browser对象. 解决方案: 在jquery.Jcrop.js的源码最下面直接加上下面这段代码: (function(jQuery){ if(jQuery.browser) return; jQuery.browser

jQuery不支持hashchange事件

$(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashchange的相关内容,所以靠事件模拟里进行hashchange.

解决jQuery不支持$.browser的办法

(function(jQuery){ if(jQuery.browser) return; jQuery.browser = {}; jQuery.browser.mozilla = false; jQuery.browser.webkit = false; jQuery.browser.opera = false; jQuery.browser.msie = false; var nAgt = navigator.userAgent; jQuery.browser.name = navigat

jquery 不支持$.browser

if (!$.browser) { $.browser = { mozilla : /firefox/.test(navigator.userAgent.toLowerCase()), webkit : /webkit/.test(navigator.userAgent.toLowerCase()), opera : /opera/.test(navigator.userAgent.toLowerCase()), msie : /msie/.test(navigator.userAgent.to

jQuery 对AMD的支持(Require.js中如何使用jQuery)

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主