我正在尝试开发一个可以嵌入任何网站的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","https://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: "https://mysite.com/my_css_path.css" }); css.appendTo('head'); }); $.fn.fetchfeed = function(options) { var defaults = { //default params; }; var opts = $.extend(defaults, options); var myURL = "https://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
并且无法加载小部件。 可能有什么不对?
令人惊讶的是,这个小部件代码正在我的网站上运行!
如果在代码执行之前未定义jQuery,那么您在此处获得TypeError
:
$.fn.fetchfeed
因为$
不是jQuery对象。 尝试将此行和main()
中的代码移动到jQuery(document).ready(function($){ ... });
上面的建设。
好吧,经过无数次的尝试,我解决了它并开始学习很多东西。 我还不清楚很多事情。 通过编辑此答案来纠正我,或者如果您发现任何错误,请发表评论。
第一个$.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","https://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 = "https://mysite.com/?callback=?"; $.getJSON(jsonp_url, function(data) { //success }) .error(function() { //fail }); } }
用户网站/博客上的代码将是
页面加载完成后将执行该function。
需要了解更多jQuery教程分享未捕获的TypeError:无法为小部件实现设置未定义的’FUNCTION_NAME’,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享未捕获的TypeError:无法为小部件实现设置未定义的’FUNCTION_NAME’相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/982153.html