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というエラーが表示され、ウィジェットを読み込めません。何が間違っていますか？

驚いたことに、このウィジェットコードは私のlocalhost上のサイトで動作しています！

Answer 1

これは数え切れないほどの試みの後、私はそれを解決して多くのことを学ばなければなりません。それでも私は多くのことが不明です。この回答を編集して私を修正してください。何か間違っていると思われる場合はコメントしてください。

最初の$.fnはNULLです（または、渡された値がnull/undefinedでした）。理由は、<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エラーが発生します。これはそのまま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> 

機能になりますが実行されます。

Answer 2

jQueryのは、あなたのコードの実行前に未定義た場合は、ここでTypeErrorを得る：

$.fn.fetchfeed 

$はjQueryオブジェクトではありませんので。 main()のこの行と次のコードを上記のjQuery(document).ready(function($){ ... });構造に移動してください。