ZeroClipboard.config is not a function 和 ZeroClipboard is not defined 错误解决

信息发布:soゝso 发布日期:2016-10-25 14:41 热度:131 分享到:

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。


本文主题

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

¥我需要走的更远,点击我 赞助。 如果还有疑问,点击我加群,为你提供最好的解答。


工具导航地图

 
Nodejs + socket Demo 赞助二维码 赞助名单 百度口碑点赞 查看QQ群美女帅哥 点击加QQ群 听音乐 开启弹幕 X
反馈意见