更新

Question

我正在编写Chrome扩展程序并且我正在尝试获取RSS源＆＃34;媒体：缩略图＆＃34;但功能el.find（＆＃39; media \：thumbnail＆＃39;）。attr（＆＃39; url＆＃39;）输出＆＃39; undefined＆＃39;。

这是我的代码：

$.get("http://www.reddit.com/.rss", function (data) {
    $(data).find("item").each(function () { // or "item" or whatever suits your feed
        var el = $(this);
        $("tbody").append("<tr><th>" + el.find('media\\:thumbnail').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>"); 
    });
});

Answer 1

JS中有一些被称为“同源策略”的东西。这意味着您无法使用相同的协议查询不是来自同一域的内容，并使用相同的子域。

您需要研究“cors”来调用其他域名，但在这种情况下，这对您没有帮助。 Cors需要你在http响应头中包含东西。

另一种方法是将您的Web服务器配置为反向代理，并将来自reddit的请求作为本地调用进行掩码。

Answer 2

以下是有助于

的脚本

首先，您需要一个将选择crosdomain内容的服务器脚本

<?php // crossdomain php script
header('Content-type: application/xml');
header('Access-Control-Allow-Origin: *');
ini_set('error_reporting', E_WARNING );
$str_xml = '';
if ($_POST['source'] === 'reddit') {
    $str_xml = file_get_contents('http://www.reddit.com/.rss');
}
die($str_xml);
?>

然后发出Ajax请求并解析响应xml

$.ajax({
    type: "POST",
    url: "crossdomain.php",
    dataType: "xml",
    data:{source:"reddit"},
    success: function(xml){
        var xmlText = new XMLSerializer().serializeToString(xml);
        $(xmlText).find("media\\:thumbnail").each(function(){
             $("tbody").append("<tr><th>" + $(this).attr('url') + "</th><td>" + $(this).parent().find("title").text() + "</td></tr>");
        });
    }
  });

Answer 3

我找到了解决方法。我使用元素＆＃34;描述＆＃34; RSS提要。它包含图像的链接。

Xml：

<description>
<table> <tr><td> <a href="http://www.reddit.com/r/funny/comments/2vbpix/cat_walks_into_a_bar/"><img src="http://b.thumbs.redditmedia.com/50jHjrHnJTSIX_Q86UUXe1Kc-rAxYyhEd90GeUDJHao.jpg" alt="Cat walks into a bar." title="Cat walks into a bar." /></a> </td><td> submitted by <a href="http://www.reddit.com/user/_dear_ms_leading_"> _dear_ms_leading_ </a> to <a href="http://www.reddit.com/r/funny/"> funny</a> <br/> <a href="http://i.imgur.com/AR14Y61.jpg">[link]</a> <a href="http://www.reddit.com/r/funny/comments/2vbpix/cat_walks_into_a_bar/">[69 commentaires]</a> </td></tr></table>
</description>

Jquery：

$('' + el.find('description').text()).find("img").attr("src")

Answer 4

我无法相信人们不理解这个问题并对其他事情给出答案提问者不提及CORS或任何可能指向它的错误问题只是询问XML节点上的JQuery选择器而不是HTML，他使用AJAX获取RSS提要的事实是不可靠的，所以可以假设在这种情况下CORS不是问题。

我一直在努力完全相同的事情，显然双反斜杠应该逃脱，但在这种情况下似乎不起作用。

我所做的是使用带有 url 属性的JQuery attribute selector，所有缩略图在我的情况下都有url属性。
所以你的代码是：

$.get("http://www.reddit.com/.rss", function (data) {
    $(data).find("item").each(function () { // or "item" or whatever suits your feed
        var el = $(this);
        $("tbody").append("<tr><th>" + el.find('[url]').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>"); 
    });
});

更新

使用map

可能更好

$.get("http://www.reddit.com/.rss", function (data) {
  var tbody = $('tbody');
  tbody.append(
    $(data).find("item").map(function () { // or "item" or whatever suits your feed
      var el = $(this);
      return $("<tr><th>" + el.find('[url]').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>"); 
    }).get()
  );
});

我已经测试过它了

使用Jquery读取media \\：thumbnail RSS feed

4 个答案:

更新