未捕获的类型错误：无法设置属性“FUNCTION_NAME”小部件实现的未定义

Question

我正在尝试开发一个可以嵌入到任何网站的 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 = $("<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);

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

 <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>

当我将此代码放在其他站点上并尝试加载小部件时，它给了我 Uncaught TypeError: Can not set property 'fetchfeed ' 的未定义 错误并且无法加载小部件。可能出什么问题了？

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

Answer 1

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

$.fn.fetchfeed

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

Answer 2

好吧，经过无数次尝试，我解决了这个问题并学到了很多东西。我仍然对很多事情不清楚。请通过编辑此答案来纠正我，或者如果您发现任何错误，请发表评论。

第一个 $.fn 为 null（或者传递给它的值为 null/未定义）。原因是，脚本是在调用 后执行的。因此 .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
        });
    }
}

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

<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>

在页面加载完成时执行该函数。