未捕获的TypeError：无法为小部件实现设置未定义的’FUNCTION_NAME’

我正在尝试开发一个可以嵌入任何网站的jQuery小部件。 以下是脚本代码：

(function($) { var jQuery; if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.6.2') { var script_tag = document.createElement('script'); script_tag.setAttribute("type","text/javascript"); script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"); script_tag.onload = scriptLoadHandler; script_tag.onreadystatechange = function () { if (this.readyState == 'complete' || this.readyState == 'loaded') scriptLoadHandler(); }; (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); } else { jQuery = window.jQuery; main(); } function scriptLoadHandler() { jQuery = window.jQuery.noConflict(true); main(); } function main() { jQuery(document).ready(function($) { var css = $("", { rel: "stylesheet", type: "text/css", href: "http://mysite.com/my_css_path.css" }); css.appendTo('head'); }); $.fn.fetchfeed = function(options) { var defaults = { //default params; }; var opts = $.extend(defaults, options); var myURL = "http://mysite.com/"+opts.user+".json?"; var params = "&callback=?" var jsonp_url = myURL + encodeURIComponent(params); $.getJSON(jsonp_url, function(data) { //build widget html }) .error(function() { //show error }); } } })(jQuery); 

以下是需要放在用户网站上的代码：

   
 $('#my-widget-container').fetchfeed({/*parameters*/}); 

当我将此代码放在其他站点上并尝试加载小部件时，它会给我Uncaught TypeError: Can not set property 'fetchfeed' of undefined错误的Uncaught TypeError: Can not set property 'fetchfeed' of undefined并且无法加载小部件。 可能有什么不对？

令人惊讶的是，这个小部件代码正在我的网站上运行！

Answer 1

如果在代码执行之前未定义jQuery，那么您在此处获得TypeError ：

 $.fn.fetchfeed 

因为$不是jQuery对象。 尝试将此行和main()中的代码移动到jQuery(document).ready(function($){ ... }); 上面的建设。

Answer 2

好吧，经过无数次的尝试，我解决了它并开始学习很多东西。 我还不清楚很多事情。 通过编辑此答案来纠正我，或者如果您发现任何错误，请发表评论。

第一个$.fn为null（或传递给它的值为null / undefined）。 原因是，脚本在被调用。 所以.fetchfeed({...})未定义。

然后我在window.onload移动了代码，它给了我错误can not call method fetchfeed on null 。 它必须是因为它没有获得元素（即$('#my-widget-container') ）脚本也无法识别$ 。

再次经过几次调整后， $.fn.fetchfeed function fetchfeed() {...}给了我错误undefined fetchfeed 。 这是因为函数fetchfeed在另一个函数中。

编码&callback=? 参数给出了Access-Control-Allow-Origin错误。 这应该按原样在url中传递。

经过一些研究，我修改了下面的代码，现在正常工作。

 function fetchfeed(options) { var o = options; var jQuery; if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.6.2') { var script_tag = document.createElement('script'); script_tag.setAttribute("type","text/javascript"); script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"); script_tag.onload = scriptLoadHandler; script_tag.onreadystatechange = function () { if (this.readyState == 'complete' || this.readyState == 'loaded') scriptLoadHandler(); }; (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); } else { jQuery = window.jQuery; ff(jQuery, o); } function scriptLoadHandler() { jQuery = window.jQuery.noConflict(true); ff(jQuery, o); } function ff($, options) { var defaults = { ... }; var opts = $.extend(defaults, options); var jsonp_url = "http://mysite.com/?callback=?"; $.getJSON(jsonp_url, function(data) { //success }) .error(function() { //fail }); } } 

用户网站/博客上的代码将是

页面加载完成后将执行该function。