如何用JavaScript从RSS中获取img src?

时间:2014-10-29 09:47:30

标签: javascript xml wordpress tags rss

我想知道如何从RSS中的项目中取出img src。我使用HTML和JavaScript来读取标签。

HTML& JAVASCRIPT:

<html>
<body>
    <script>
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET","news.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 

    var x=xmlDoc.getElementsByTagName("item");
    for (i=0;i<x.length;i++)
      { 
        var title = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
        var linkstr = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
        var datestr = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue;
        var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

        document.write(title);
        document.write(linkstr);
        document.write(datestr);
        document.write(image);
      }
    </script>
</body>
</html>

XML:

<description><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/news/1/images/image.jpg" width="90%" /></div>

<content:encoded><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/news/1/images/image.jpg" width="90%" /></div><div><p>This is news this is news this is news this is news.</p>
</div><p><a rel="nofollow" href="http://website.com/news/1">This is news</a><a rel="nofollow" href="http://website.com">Website</a>.</p>
]]></content:encoded>

<enclosure url="http://website.com/news/1/images/image.jpg" length="174264" type="image/jpg" />

<media:content xmlns:media="http://search.yahoo.com/mrss/" url="http://website.com/news/1/images/image.jpg" width="640" height="640" medium="image" type="image/jpeg">
    <media:copyright>Website</media:copyright>
</media:content>

<media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://website.com/news/1/images/image.jpg" width="640" height="640" />

所以起初我尝试过这样的事情:

var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("enclosure")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("media:content")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("media:thumbnail")[0].childNodes[0].nodeValue;

但是他们都没有工作..我使用wordpress,起初我在寻找为我的RSS创建自己的标签的方法,你可以把你自己的内容选择,但我不能这样做。

必须有办法从imml文件中获取img,但我不知道如何。我试过看这里,但它对我不起作用..

get image out of CDATA and description tag with jquery

编辑:

在这里查看要求的项目元素

    <item>
        <title>This is news</title>
        <link>http://website.com/blog/wordpress/this-is-news/</link>
        <comments>http://website.com/blog/wordpress/this-is-news/#comments</comments>
        <pubDate>Wed, 2 Jun 2013 05:12:12 +0000</pubDate>
        <dc:creator><![CDATA[Website]]></dc:creator>
                <category><![CDATA[Uncategorized]]></category>

        <guid isPermaLink="false">http://www.website.com/blog/wordpress/?p=22</guid>
        <description><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="90%" /></div>
<div>This is news this is news this is news this is news this is news.</div>
<p>The post <a rel="nofollow" href="http://website.com/blog/wordpress/this-is-news/">This is news</a> appeared first on <a rel="nofollow" href="http://website.com/blog/wordpress">website.com</a>.</p>
]]></description>
                <content:encoded><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="90%" /></div><div><p>This is news this is news this is news this is news this is news.</p>
</div><p>The post <a rel="nofollow" href="http://website.com/blog/wordpress/this-is-news/">This is news</a> appeared first on <a rel="nofollow" href="http://website.com/blog/wordpress">website.com</a>.</p>
]]></content:encoded>
            <wfw:commentRss>http://website.com/blog/wordpress/this-is-news/feed/</wfw:commentRss>
        <slash:comments>0</slash:comments>
    <enclosure url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" length="174264" type="image/jpg" />
<media:content xmlns:media="http://search.yahoo.com/" url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="640" height="640" medium="image" type="image/jpeg">
    <media:copyright>website.com</media:copyright>
</media:content>
<media:thumbnail xmlns:media="http://search.yahoo.com/" url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="640" height="640" />
    </item>

已解决:

代替

var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

有关

var img = $(x[i]).find('enclosure').attr('url');

(你应该添加jQuery库)

2 个答案:

答案 0 :(得分:1)

在js变量中编写xml然后你必须使用:

var myXML = ....
var split1 = myXML.split('url="');
...
..
.

或者您使用jQuery。

答案 1 :(得分:0)

尝试使用此代码,而不是您的代码:

Wordpress中的

var image_URLs = [];
$.ajax({
    url : "news.xml",
    //async : false, //uncomment fot sync use
    success : function(data){
        data = $(data);
        data.find("item").each(function(i){

            var URL = $(this).find("enclosure").attr("url");
            console.log ("img n#"+ i + ":",URL);
            image_URLs.push(URL);
        });
    },
    error : function(a,b,c){
        console.log(a,b,c);
    }
});

查看浏览器的控制台,以查看jQuery解析XML或脚本是否找到您的图像时是否存在错误。

本地:

<html>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    var image_URLs = [];
    $.ajax({
        url : "/news.xml",
    //async : false, //uncomment fot sync use
        success : function(data){
            data = $(data);
            data.find("item").each(function(i){

                var URL = $(this).find("enclosure").attr("url");
                console.log ("img n#"+ i + ":",URL);
                image_URLs.push(URL);
            });
        },
        error : function(a,b,c){
            console.log(a,b,c);
        }
    });
    </script>
</body>
</html>
如果您想使用离线jQuery,请

下载此源代码://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js