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

问题描述

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

I am trying to develop a jQuery widget which can be embedded on any site. Following is the script code:

(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 = $("<link>", { 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);

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

And following is the code which need to be placed on User's site:

 <script id='mywidgetscript' src='http://my_site.com/javascripts/widget.js'></script>
 <div id='my-widget-container'></div>
 <script>$('#my-widget-container').fetchfeed({/*parameters*/});</script>

当我将此代码放在其他网站上并尝试加载小部件时，它会给我未捕获TypeError：无法设置未定义属性'fetchfeed'并且无法加载小部件。可能有什么问题？

When I put this code on other site and try to load the widget it gives me the Uncaught TypeError: Can not set property 'fetchfeed' of undefined error and fails to load the widget. What could be wrong?

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

Surprisingly this widget code is working on my site on localhost!!!

推荐答案

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

Okay, after countless attempts I solved it and got to learn many things. Still I'm unclear about many things. Do correct me by editing this answer or please comment if you find anything wrong.

首先 $。fn 为空（或传递给它的值为null / undefined）。原因是，脚本在< script> $（'＃my-widget-container'）之后执行.fetchfeed（{/ * parameters * /}）;< / script> 被叫。所以 .fetchfeed（{...}）未定义。

First $.fn was null (or value being passed to it was null/undefined). Reason, the script was getting executed after <script>$('#my-widget-container').fetchfeed({/*parameters*/});</script> being called. So .fetchfeed({...}) was undefined.

然后我移动了<$ c中的代码$ c> window.onload 它给了我错误无法在null 上调用方法fetchfeed。必须是因为它没有获得元素（即<$​​ c $ c> $（'＃my-widget-container'）），脚本也无法识别 $ 。

Then I moved the code in window.onload it gave me error can not call method fetchfeed on null. It must be because it was not getting the element (i.e. $('#my-widget-container')) also script was not able to recognize $.

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

Again after few tweaks making $.fn.fetchfeed to function fetchfeed() {...} gave me error undefined fetchfeed. This was because function fetchfeed was inside another function.

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

Also encoding &callback=? parameter gives Access-Control-Allow-Origin error. This should be passed in url as is.

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

After some research I modified the code as below and now working correctly.

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

用户网站/博客上的代码

Code on user's site/blog will be

<div id='my-widget-container'></div>
<script id='my_widget_script' src='https://PATH_OF_SCRIPT/FILE_NAME.js'></script>
<script type='text/javascript'>
    fetchfeed({/*params*/});
</script>

当页面加载完成时，该函数将被执行。

The function will be executed when page load completes.

这篇关于未捕获的TypeError：无法为小部件实现设置未定义的'FUNCTION_NAME'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！