我正在尝试开发一个可以嵌入任何站点的 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
错误并且无法加载小部件。有什么问题?
令人惊讶的是,这个小部件代码正在我的本地主机上的网站上运行!!!