잡히지 않은 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에서 작동합니다 !!! jQuery를 당신의 코드가 실행되기 전에 정의되지 않은 경우

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

, 당신은 여기 TypeError를 얻을 :

$.fn.fetchfeed 

$ 때문에 jQuery를 개체 수 없습니다. main()에있는이 행과 다음 코드를 위에있는 jQuery(document).ready(function($){ ... }); 구조로 이동해보세요.