2

どのサイトにも埋め込むことができる 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 の私のサイトで動作しています!!!

4

2 に答える 2

0

コードの実行前に jQuery が定義されていなかった場合は、次のようになりTypeErrorます。

$.fn.fetchfeed

$jQuery オブジェクトではないためです。この行と次のコードを上main()のjQuery(document).ready(function($){ ... });構造に移動してみてください。

于 2011-10-19T08:05:53.040 に答える
0

さて、数え切れないほどの試みの後、私はそれを解決し、多くのことを学ぶようになりました. まだまだ不明な点が多いです。この回答を編集して修正するか、何か問題がある場合はコメントしてください。

最初$.fnは null でした (または、渡される値が null/未定義でした)。理由、スクリプトは<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>

ページの読み込みが完了すると、関数が実行されます。

于 2011-10-22T07:02:14.587 に答える