ZeroClipboard.config is not a function 和 ZeroClipboard is not defined 错误解决
ZeroClipboard.config is not a function。
第二次出现这个错误了。上一次忘记怎么解决的,这次又遇到了,把问题阐述一下,方便查阅。
ZeroClipboard.config({
moviePath: "/js/common/ZeroClipboard.swf",
hoverClass: "btn-clipboard-hover"
})
这么去定义的时候,控制台出现这个错误,发现抛出ZeroClipboard.config is not a function。出现这个问题,我总结了一下,有2点原因:
- 重复引用
ZeroClipboard.js
,怎么排查?先看是否引入了2个,再看是否有js文件中已经包含了ZeroClipboard.js。 - 版本问题。我现在遇到的是版本问题。
我的问题是,原来的代码是用version为1.3.5,ZeroClipboard v1.3.5
可以这么去用,而我项目中已经在cdn
上有这个ZeroClipboard.js
,那我为了高效的利用,直接用原来的,就出现这个问题了。后来发现以前用的是version是1.2.1,导致出了问题。
而低版本的配置应该是这么去用的。
new ZeroClipboard(so(".copy_btn"),{
moviePath: "/js/common/ZeroClipboard.swf",
hoverClass: "btn-clipboard-hover"
})
解决问题了。
咱们再说说 ZeroClipboard is not defined
这个是 ZeroClipboard 找不到。
其实解决方案就百度一下就知道了,我这里总结下解决途径和方案:
一、确定加载顺序,是否在ZeroClipboard.js 加载之前使用,解决调整好加载顺序,先加载ZeroClipboard.js。
二、使用require.js也会导致加载不到,这个时候解决方案有2种。
1.修改源码(下策)。
if (typeof define === "function" && define.amd) {
define(function() {
return ZeroClipboard;
});
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
module.exports = ZeroClipboard;
} else {
window.ZeroClipboard = ZeroClipboard;
}
改成这样:
if (typeof define === "function" && define.amd) {
define(function() {
return ZeroClipboard;
});
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
module.exports = ZeroClipboard;
}
//主要是这里
window.ZeroClipboard = ZeroClipboard;
如果你的源码是这样。
//......
"function" == typeof define && define.amd ? define(["require", "exports", "module"], function(a, b, c) {
return t = c && c.id || null, p
}) : "object" == typeof module && module && "object" == typeof module.exports && module.exports ? (u = module.id || null, module.exports = p) : window.ZeroClipboard = p
那么这是三元运算符(三目运算)表达方式,你也可以不用动它,直接在后面加上如下代码:
"function" == typeof define && define.amd ? define(["require", "exports", "module"], function(a, b, c) {
return t = c && c.id || null, p
}) : "object" == typeof module && module && "object" == typeof module.exports && module.exports ? (u = module.id || null, module.exports = p) : window.ZeroClipboard = p;
//在后面加上这个就OK了。
window.ZeroClipboard = p;
2.增加代码(上策)
require.config({
baseUrl: '',
paths: {
ZeroClipboard: "/common/ZeroClipboard.min"//定义ZeroClipboard
}
});
require(['ZeroClipboard'], function (ZeroClipboard) {
window['ZeroClipboard'] = ZeroClipboard;
//or window.ZeroClipboard = ZeroClipboard;
});
因为引入后就变成私有,类似于封装一样,提供一个公共的访问方法。那就是给window。
版权所属:SO JSON在线解析
原文地址:https://www.sojson.com/blog/184.html
转载时必须以链接形式注明原始出处及本声明。
如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。