jQuery ajax 不返回 youtube iframe src答案

【问题标题】：jQuery ajax not returning youtube iframe srcjQuery ajax 不返回 youtube iframe src
【发布时间】：2012-02-25 05:59:25
【问题描述】：

我在这里有一个 jsFiddle：http://jsfiddle.net/ZXDYS/22/

我正在使用 jQuery 创建 Blogger 帖子摘要，尽管它不会返回元素 iframe 的 attr src...您可以找到博客 here 以供参考。我做错了什么？请帮忙！

$.ajax({
    url: 'http://www.blogger.com/feeds/1570527947646221682/posts/default?alt=json-in-script&max-results=3',
    type: 'get',
    dataType: "jsonp",
    success: function(data){
        for (var i = 0; i < data.feed.entry.length; i++){
            var title = data.feed.entry[i].title.$t;
            var content = data.feed.entry[i].content.$t;
            var img = $(content).find("img").attr("src");
            var iframe = $(content).find("iframe").attr("src");
            if(img==undefined){
                var imgsrc = "no image in post :( sorry?";
                    }else{
                    var imgsrc = img;
            }
            $('div.related').append('<table border="1"><tr><td colspan="2">post title - '+title+'</td></tr><tr><th width="100%">Image src</th><th width="100px">Iframe src</th></tr><tr><td>'+imgsrc+'</td><td>'+iframe+'</td></tr></table>');           
        }
    }
});

【问题讨论】：

您知道同源策略可以防止跨域 AJAX 调用吗？（JSONP 除外）。

标签： javascript jquery iframe src

【解决方案1】：

您的 JSONP 请求返回的字符串如下所示：

<iframe width="100%" height="315" src="http://www.youtube.com/embed/9u7Fp2VVdkM"
 frameborder="0" allowfullscreen></iframe>video
<div class="blogger-post-footer">
   <img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1570527947646221682-8424983193135836585?l=ykhaliq.blogspot.com' alt='' />
</div>

请注意<iframe> 元素没有父元素。 .find 方法查找任何后代，但不查找“根”元素。

一般的解决方案是创建一个包装器，并附加字符串：

var $content = $('<div>').html(content);
var img = $content.find("img").attr("src");
var iframe = $content.find("iframe").attr("src");

固定代码：http://jsfiddle.net/ZXDYS/31/

【讨论】：