Uncaught TypeError：無法設置未定義的小工具實現的'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' of undefined錯誤，並無法加載小部件。什麼可能是錯的？

令人驚訝的是，這個小部件代碼正在我的本地主機上工作！

Answer 1

好吧，無數的嘗試後，我解決了它，並得到了很多東西。我仍然不清楚很多事情。通過編輯這個答案糾正我，或者如果你發現任何錯誤，請發表評論。

第一個$.fn爲空（或傳遞給它的值爲空/未定義）。原因，劇本在<script>$('#my-widget-container').fetchfeed({/*parameters*/});</script>被調用後被執行。所以.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錯誤。這應該按原樣傳遞。

經過一番研究，我修改了下面的代碼，現在正常工作。用戶的網站

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> 

頁面加載完成時，此功能將被執行。

Answer 2

如果jQuery的是你的代碼執行前沒有定義，那麼你得到TypeError這裏：

$.fn.fetchfeed 

因爲$不是jQuery對象。嘗試將該行和main()中的代碼移動到上面的jQuery(document).ready(function($){ ... });構造中。