使用自己的 Jquery Oembed 处理程序

Question

我正在尝试使用我自己的函数（从来不喜欢 $(document).ready()）从 URL 动态加载嵌入。

我正在尝试这样：

function video(donde,url) {
    $("#"+donde).oembed(url);
    return false;
}

一个使用示例是：

<div class="texto">
  [my title]
  <span style="float: right;">
      <img onclick="video('video68084','http://www.youtube.com/watch?v=ORZTCQjAuZY');" src="http://i1.ytimg.com/vi/ORZTCQjAuZY/default.jpg" alt="preview" onerror="this.src='images/linket.png';" class="caja_con_sombra" style="width: 80px; height: 60px;">  </span>
  <div style="float: left; width: 76%;">
       [my description]
  </div>
  <div id="video68084"></div>
</div>

Which Jumps:

b.type is not a function
[Interrumpir en este error] b.ready);var j=false;try{j=E.frameElem...ow(j))return false;if(j.constructor&& 

Onclick vía firebug :(

知道我错过了什么吗？错误源文件是 jquery.min.js :S

Answer 1

你没有遗漏任何东西，你在 oembed 插件中发现了一个错误。不错的发现，也许你在质量保证方面有一个未来的职业生涯:)

看起来 oembed 和 jQuery 都想使用 .type 但 jQuery 最终以 oembed 的字符串 .type 结尾，其中它需要自己的函数.type。

oembed 插件 在 jQuery-1.3.2 上运行良好，但从 jQuery-1.4 开始就出现问题.3.

您可以从此 jsfiddle 中提取 oembed 插件的功能版本： http://jsfiddle.net/ambigously/ ZVhUn/1/

此问题已报告过多次但 oembed 作者似乎并没有在听。如果您需要的话，这是该插件的固定版本：

(function($) {
    $.fn.oembed = function(url, options, callback) {

        options = $.extend(true, $.fn.oembed.defaults, options);

        return this.each(function() {

            var container = $(this),
                resourceURL = (url != null) ? url : container.attr("href"),
                provider;

            if (!callback) callback = function(container, oembed) {            
                 $.fn.oembed.insertCode(container, options.embedMethod, oembed);
            };

            if (resourceURL != null) {
                provider = getOEmbedProvider(resourceURL);

                if (provider != null) {                        
                    provider.params = getNormalizedParams(options[provider.name]) || {};
                    provider.maxWidth = options.maxWidth;
                    provider.maxHeight = options.maxHeight;                                        
                    provider.embedCode(container, resourceURL, callback);
                    return;
                }
            }

            callback(container, null);
        });
    };

    // Plugin defaults
    $.fn.oembed.defaults = {
        maxWidth: null,
        maxHeight: null,
        embedMethod: "replace" // "auto", "append", "fill"
    };

    $.fn.oembed.insertCode = function(container, embedMethod, oembed) {
        if (oembed == null)
            return;
        switch(embedMethod)
        {
            case "auto":                
                if (container.attr("href") != null) {
                    $.fn.oembed.insertCode(container, "append", oembed);
                }
                else {
                    $.fn.oembed.insertCode(container, "replace", oembed);
                };
                break;
            case "replace":    
                container.replaceWith(oembed.code);
                break;
            case "fill":
                container.html(oembed.code);
                break;
            case "append":
                var oembedContainer = container.next();
                if (oembedContainer == null || !oembedContainer.hasClass("oembed-container")) {
                    oembedContainer = container
                        .after('<div class="oembed-container"></div>')
                        .next(".oembed-container");
                    if (oembed != null && oembed.provider_name != null)
                        oembedContainer.toggleClass("oembed-container-" + oembed.provider_name);        
                }
                oembedContainer.html(oembed.code);                
                break;            
        }
    };

    $.fn.oembed.getPhotoCode = function(url, data) {
        var alt = data.title ? data.title : '';
        alt += data.author_name ? ' - ' + data.author_name : '';
        alt += data.provider_name ? ' - ' +data.provider_name : '';
        var code = '<div><a href="' + url + '" target="_blank"><img src="' + data.url + '" alt="' + alt + '"/></a></div>';
        if (data.html)
            code += "<div>" + data.html + "</div>";
        return code;
    };

    $.fn.oembed.getVideoCode = function(url, data) {
        var code = data.html;
        return code;
    };

    $.fn.oembed.getRichCode = function(url, data) {
        var code = data.html;
        return code;
    };

    $.fn.oembed.getGenericCode = function(url, data) {
        var title = (data.title != null) ? data.title : url,
            code = '<a href="' + url + '">' + title + '</a>';
        if (data.html)
            code += "<div>" + data.html + "</div>";
        return code;
    };

    $.fn.oembed.isAvailable = function(url) {
        var provider = getOEmbedProvider(url);
        return (provider != null);
    };

    /* Private Methods */
    function getOEmbedProvider(url) {
        for (var i = 0; i < providers.length; i++) {
            if (providers[i].matches(url))
                return providers[i];
        }
        return null;
    }

    function getNormalizedParams(params) {
        if (params == null)
            return null;
        var normalizedParams = {};
        for (var key in params) {
            if (key != null)
                normalizedParams[key.toLowerCase()] = params[key];
        }
        return normalizedParams;
    }

    var providers = [
        new OEmbedProvider("fivemin", "5min.com"),
        new OEmbedProvider("amazon", "amazon.com"),
        new OEmbedProvider("flickr", "flickr", "http://flickr.com/services/oembed", "jsoncallback"),    
        new OEmbedProvider("googlevideo", "video.google."),
        new OEmbedProvider("hulu", "hulu.com"),
        new OEmbedProvider("imdb", "imdb.com"),
        new OEmbedProvider("metacafe", "metacafe.com"),
        new OEmbedProvider("qik", "qik.com"),
        new OEmbedProvider("revision3", "revision3.com"),
        new OEmbedProvider("slideshare", "slideshare.net"),
        new OEmbedProvider("twitpic", "twitpic.com"),
        new OEmbedProvider("viddler", "viddler.com"),
        new OEmbedProvider("vimeo", "vimeo.com", "http://vimeo.com/api/oembed.json"),
        new OEmbedProvider("wikipedia", "wikipedia.org"),
        new OEmbedProvider("wordpress", "wordpress.com"),
        new OEmbedProvider("youtube", "youtube.com"),
        new OEmbedProvider("vids.myspace.com", "vids.myspace.com", "http://vids.myspace.com/index.cfm?fuseaction=oembed"),
        new OEmbedProvider("screenr", "screenr.com", "http://screenr.com/api/oembed.json")
    ];

    function OEmbedProvider(name, urlPattern, oEmbedUrl, callbackparameter) {
        this.name = name;
        this.urlPattern = urlPattern;
        this.oEmbedUrl = (oEmbedUrl != null) ? oEmbedUrl : "http://oohembed.com/oohembed/";
        this.callbackparameter = (callbackparameter != null) ? callbackparameter : "callback";
        this.maxWidth = 500;
        this.maxHeight = 400;

        this.matches = function(externalUrl) {
            // TODO: Convert to Regex
            return externalUrl.indexOf(this.urlPattern) >= 0;
        };

        this.getRequestUrl = function(externalUrl) {

            var url = this.oEmbedUrl;

            if (url.indexOf("?") <= 0)
                url = url + "?";
            else
                url = url + "&";

            var qs = "";

            if (this.maxWidth != null && this.params["maxwidth"] == null)
                this.params["maxwidth"] = this.maxWidth;                

            if (this.maxHeight != null && this.params["maxheight"] == null)
                this.params["maxheight"] = this.maxHeight;

            for (var i in this.params) {
                // We don't want them to jack everything up by changing the callback parameter
                if (i == this.callbackparameter)
                  continue;

                // allows the options to be set to null, don't send null values to the server as parameters
                if (this.params[i] != null)
                    qs += "&" + escape(i) + "=" + this.params[i];
            }            


            url += "format=json&url=" + escape(externalUrl) +             
                    qs + 
                    "&" + this.callbackparameter + "=?";

            return url;
        };

        this.embedCode = function(container, externalUrl, callback) {

            var request = this.getRequestUrl(externalUrl);

            $.getJSON(request, function(data) {

                var code, type = data.type;
                var oembed = $.extend({ }, data);

                switch (type) {
                    case "photo":
                        oembed.code = $.fn.oembed.getPhotoCode(externalUrl, data);
                        break;
                    case "video":
                        oembed.code = $.fn.oembed.getVideoCode(externalUrl, data);
                        break;
                    case "rich":
                        oembed.code = $.fn.oembed.getRichCode(externalUrl, data);
                        break;
                    default:
                        oembed.code = $.fn.oembed.getGenericCode(externalUrl, data);
                        break;
                }

                callback(container, oembed);
            });
        };
    }
})(jQuery);

唯一的变化是我将 var oembed = $.extend(data); 替换为 var oembed = $.extend({ }, data); 在文件底部的 this.embedCode 中。