使用Google Feed API获取图片

时间:2014-04-17 11:48:19

标签: javascript jquery ajax wordpress google-feed-api

我正在尝试使用google feeds API从我的wordpress Feed(http://dev.emagpress.com/feed)获取图片,但似乎无法出于某种原因这样做。我目前的代码在下面,减去了我从Feed中获取图片时所做的任何尝试。

有人能指出我正确的方向或给我一些可行的代码吗?

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://dev.emagpress.com/feed");

      feed.load(function(result) {

        if (!result.error) {

          var container = document.getElementById("stories");

          for (var i = 0; i < result.feed.entries.length; i++) {

            var entry = result.feed.entries[i];

            var title = entry.title;
            var pageId = title.toLowerCase().replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()\s]/g,"");
            var link = entry.link;
            var author = entry.author;
            var snippet = entry.contentSnippet;
            var date = entry.publishedDate;
            var content = entry.content;

            console.log(entry);

            var storyOutput = '<div class="storyContainer">';
                    storyOutput += '<a href="#' + pageId + '">' + title + '</a>';
                    storyOutput += '<p>' + snippet + '</p>';
                storyOutput += '</div> <!-- end storyContianer -->';

            $('#stories').append(storyOutput);

            var pageOutput = '<div class="pageContent" data-role="page" data-theme="b" id="' + pageId + '">';
                    pageOutput += '<div data-role="header" class="header">';
                        pageOutput += '<a class="backButton" href="javascript:history.go(-1)" data-transition="slide" data-diraction="reverse" data-icon="back">Back</a>'
                        pageOutput += '<h1>Stories</h1>';
                    pageOutput += '</div>';
                    pageOutput += '<h2 class="storyTitle">' + title + '</h2>';
                    pageOutput += '<div data-role="content" class="mainText">';
                        pageOutput += content;
                    pageOutput += '</div>';
                pageOutput += '</div>';

            $('#insertAfter').after(pageOutput);

          }

        }

      });

    }

    google.setOnLoadCallback(initialize);

1 个答案:

答案 0 :(得分:0)

您需要使用closure属性来执行此操作。您可以使用以下结构来获取RSS订阅源。

function fetchRss(url) {
    var jsonFeed = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=15&callback=?&q=';
    $.ajax({
        url: jsonFeed + url,
        dataType: 'jsonp',
        jsonpCallback: 'JsonpCallback',
        success: jsonProcessFeed,
    });
}

function jsonpProcessFeed(data) {
    if (data.responseStatus == "200") {
        for (var i = 0; i < data.responseData.feed.entries.length; i++) {
            item = "<li>" + "<a href='" + data.responseData.feed.entries[i].link + "'>" + data.responseData.feed.entries[i].title + "</a>" + "<img src='"+ data.responseData.feed.entries[i].mediaGroups[0].contents[0].url +"'/></li>"
            $('#links').append(item);
        }
    } else {
        alert("An error occurred while fetching rss - " + data.responseDetails);
    }
}

$(document).ready(function() {
    fetchRss("http://dev.emagpress.com/feed/");
});

这是一个有效的演示:Demo

以下是api的示例请求:API