Jak przeanalizować kanał RSS za pomocą JavaScript?


116

Muszę przeanalizować źródło danych RSS (XML w wersji 2.0) i wyświetlić przeanalizowane szczegóły na stronie HTML.


12
1) Czego dokładnie próbowałeś? 2) Co dokładnie chcesz przeanalizować? (jakie informacje chcesz wyodrębnić z kanału?) 3) Gdzie dokładnie chcesz, aby były wyświetlane na Twojej stronie? 4) Jaki dokładnie jest Twój kod HTML? Krótko mówiąc, wszyscy lubimy udawać, że jesteśmy Davidem Copperfieldem, ale nie jestem pewien, czy długo oszukiwalibyśmy publiczność.
haylem

Nie, mam ze sobą kolejne karmienie. Nie mogę tego opublikować. To dlatego umieściłem tutaj próbkę
Thiru,

ok, ale to NIE jest próbka. To był tylko adres URL nieistniejącej strony. W takim przypadku moja odpowiedź zawiera „próbkę”. To zmienna FEED_URL. Po prostu umieść tam to, czego potrzebujesz. Jeśli potrzebujesz więcej pomocy, musisz również podać więcej szczegółów na temat potrzebnych elementów kanału, jak mają wyglądać kody pośredniczące HTMK, gdzie chcesz wstrzyknąć wygenerowane kody HTML, a także możesz podać prawdziwą próbkę Twojego źródła RSS (po prostu skopiuj fragment i zastąp rzeczywistą zawartość symbolami zastępczymi).
haylem

Odpowiedzi:


216

Analizowanie kanału

Dzięki jQuery 's jFeed

(Nie polecaj tego, zobacz inne opcje).

jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});

Z wbudowaną obsługą XML jQuery

$.get(FEED_URL, function (data) {
    $(data).find("entry").each(function () { // or "item" or whatever suits your feed
        var el = $(this);

        console.log("------------------------");
        console.log("title      : " + el.find("title").text());
        console.log("author     : " + el.find("author").text());
        console.log("description: " + el.find("description").text());
    });
});

Dzięki jQuery i Google AJAX Feed API

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(FEED_URL),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log("------------------------");
        console.log("title      : " + e.title);
        console.log("author     : " + e.author);
        console.log("description: " + e.description);
      });
    }
  }
});

Ale to oznacza, że ​​jesteś ufny, że są online i osiągalni.


Budowanie treści

Po pomyślnym wyodrębnieniu potrzebnych informacji z kanału możesz utworzyć DocumentFragments ( document.createDocumentFragment()zawierające elementy (utworzone za pomocą document.createElement()), które chcesz wstrzyknąć, aby wyświetlić swoje dane.


Wstrzyknięcie zawartości

Wybierz element kontenera, który chcesz umieścić na stronie i dołącz do niego fragmenty dokumentu, a następnie po prostu użyj innerHTML, aby całkowicie zastąpić jego zawartość.

Coś jak:

$('#rss-viewer').append(aDocumentFragmentEntry);

lub:

$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;

Dane testowe

Korzystając z kanału tego pytania , który w chwili pisania tego tekstu podaje:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:re="http://purl.org/atompub/rank/1.0">
    <title type="text">How to parse a RSS feed using javascript? - Stack Overflow</title>
    <link rel="self" href="https://stackoverflow.com/feeds/question/10943544" type="application/atom+xml" />
        <link rel="hub" href="http://pubsubhubbub.appspot.com/" />        
    <link rel="alternate" href="https://stackoverflow.com/q/10943544" type="text/html" />
    <subtitle>most recent 30 from stackoverflow.com</subtitle>
    <updated>2012-06-08T06:36:47Z</updated>
    <id>https://stackoverflow.com/feeds/question/10943544</id>
    <creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license> 
    <entry>
        <id>https://stackoverflow.com/q/10943544</id>
        <re:rank scheme="http://stackoverflow.com">2</re:rank>
        <title type="text">How to parse a RSS feed using javascript?</title>
        <category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="javascript"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="html5"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="jquery-mobile"/>
        <author>
            <name>Thiru</name>
            <uri>https://stackoverflow.com/users/1126255</uri>
        </author>
        <link rel="alternate" href="/programming/10943544/how-to-parse-a-rss-feed-using-javascript" />
        <published>2012-06-08T05:34:16Z</published>
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">
            &lt;p&gt;I need to parse the RSS-Feed(XML version2.0) using XML and I want to display the parsed detail in HTML page, I tried in many ways. But its not working. My system is running under proxy, since I am new to this field, I don&#39;t know whether it is possible or not. If any one knows please help me on this. Thanks in advance.&lt;/p&gt;

        </summary>
    </entry>
    <entry>
        <id>https://stackoverflow.com/questions/10943544/-/10943610#10943610</id>
        <re:rank scheme="http://stackoverflow.com">1</re:rank>
        <title type="text">Answer by haylem for How to parse a RSS feed using javascript?</title>
        <author>
            <name>haylem</name>
            <uri>https://stackoverflow.com/users/453590</uri>
        </author>    
        <link rel="alternate" href="/programming/10943544/how-to-parse-a-rss-feed-using-javascript/10943610#10943610" />
        <published>2012-06-08T05:43:24Z</published>   
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">&lt;h1&gt;Parsing the Feed&lt;/h1&gt;

&lt;h3&gt;With jQuery&#39;s jFeed&lt;/h3&gt;

&lt;p&gt;Try this, with the &lt;a href=&quot;http://plugins.jquery.com/project/jFeed&quot; rel=&quot;nofollow&quot;&gt;jFeed&lt;/a&gt; &lt;a href=&quot;http://www.jquery.com/&quot; rel=&quot;nofollow&quot;&gt;jQuery&lt;/a&gt; plug-in&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery&#39;s Built-in XML Support&lt;/h3&gt;

&lt;pre&gt;&lt;code&gt;$.get(FEED_URL, function (data) {
    $(data).find(&quot;entry&quot;).each(function () { // or &quot;item&quot; or whatever suits your feed
        var el = $(this);

        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + el.find(&quot;title&quot;).text());
        console.log(&quot;author     : &quot; + el.find(&quot;author&quot;).text());
        console.log(&quot;description: &quot; + el.find(&quot;description&quot;).text());
    });
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery and the Google AJAX APIs&lt;/h3&gt;

&lt;p&gt;Otherwise, &lt;a href=&quot;https://developers.google.com/feed/&quot; rel=&quot;nofollow&quot;&gt;Google&#39;s AJAX Feed API&lt;/a&gt; allows you to get the feed as a JSON object:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$.ajax({
  url      : document.location.protocol + &#39;//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;num=10&amp;amp;callback=?&amp;amp;q=&#39; + encodeURIComponent(FEED_URL),
  dataType : &#39;json&#39;,
  success  : function (data) {
    if (data.responseData.feed &amp;amp;&amp;amp; data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + e.title);
        console.log(&quot;author     : &quot; + e.author);
        console.log(&quot;description: &quot; + e.description);
      });
    }
  }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;But that means you&#39;re relient on them being online and reachable.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Building Content&lt;/h1&gt;

&lt;p&gt;Once you&#39;ve successfully extracted the information you need from the feed, you need to create document fragments containing the elements you&#39;ll want to inject to display your data.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Injecting the content&lt;/h1&gt;

&lt;p&gt;Select the container element that you want on the page and append your document fragments to it, and simply use innerHTML to replace its content entirely.&lt;/p&gt;
</summary>
    </entry></feed>

Egzekucje

Korzystanie z wbudowanej obsługi XML jQuery

Wzywając:

$.get('https://stackoverflow.com/feeds/question/10943544', function (data) {
    $(data).find("entry").each(function () { // or "item" or whatever suits your feed
        var el = $(this);

        console.log("------------------------");
        console.log("title      : " + el.find("title").text());
        console.log("author     : " + el.find("author").text());
        console.log("description: " + el.find("description").text());
    });
});

Wydruki:

------------------------
title      : How to parse a RSS feed using javascript?
author     : 
            Thiru
            https://stackoverflow.com/users/1126255

description: 
------------------------
title      : Answer by haylem for How to parse a RSS feed using javascript?
author     : 
            haylem
            https://stackoverflow.com/users/453590

description: 

Korzystanie z jQuery i interfejsów API Google AJAX

Wzywając:

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('https://stackoverflow.com/feeds/question/10943544'),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log("------------------------");
        console.log("title      : " + e.title);
        console.log("author     : " + e.author);
        console.log("description: " + e.description);
      });
    }
  }
});

Wydruki:

------------------------
title      : How to parse a RSS feed using javascript?
author     : Thiru
description: undefined
------------------------
title      : Answer by haylem for How to parse a RSS feed using javascript?
author     : haylem
description: undefined

1
Dzięki za twoją odpowiedź haylem. Ale nie dostałem tego wyjścia. Czy nie jest to możliwe z javascriptem?
Czw

1
@Thiru: Właśnie wypróbowałem ostatnią metodę z kanałem RSS tego pytania ( stackoverflow.com/feeds/question/10943544 ) i dla mnie zadziałała dobrze.
haylem

8
Możesz mieć tutaj cały działający fragment kodu. Jestem pewien, że resztę możesz poćwiczyć samodzielnie.
haylem

2
@Timmy: co robisz? Czy jesteś przyjacielem Thiru? Masz podobne techniki zgłaszania problemów. Po prostu skopiowałem 2 ostatnie fragmenty kodu do mojej konsoli i uruchomiłem je i otrzymałem wyniki zgodnie z oczekiwaniami. Co zrobiłeś, jak i dla jakiego zasobu?
haylem

2
Interfejsy API Google AJAX zostały wycofane. Nie jest dostępny od stycznia 2017 r.
Ezee

39

Kolejna przestarzała opcja (dzięki @daylight) i najłatwiejsza dla mnie (właśnie tego używam w SpokenToday.info ):

API Kanał Google bez użycia jQuery i tylko z 2 etapów:

  1. Importuj bibliotekę:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
    
  2. Znajdź / Załaduj kanały ( dokumentacja ):

    var feed = new google.feeds.Feed('http://www.google.com/trends/hottrends/atom/feed?pn=p1');
    feed.load(function (data) {
        // Parse data depending on the specified response format, default is JSON.
        console.dir(data);
    });
    
  3. Aby przeanalizować dane, zapoznaj się z dokumentacją dotyczącą formatu odpowiedzi .


5
Google mówi: ten interfejs API jest oficjalnie przestarzały.

23
Interfejs Google Feed API został wycofany i nie działa od 12.02.2015 r. Bummer
raddevus

bazując na tym kodzie, czy mógłbyś dodać monit o wprowadzenie adresu URL kanału, a następnie połączyć właściwość, aby zawierała wartość, aby przeanalizować dowolny kanał RSS? na przykład, gdybym miał do czynienia z wieloma obrazami, mógłbym document.getElementById('image').style.backgroundImage = "url('" + src + "')";
połączyć

2
Interfejsy API Google AJAX zostały wycofane. Nie jest dostępny od stycznia 2017 r.
Ezee

7
czy ktoś zna odpowiednią alternatywę teraz, gdy Google API nie działa?
duellsy

3

Jeśli szukasz prostej i bezpłatnej alternatywy dla Google Feed API dla swojego widżetu rss, rss2json.com może być odpowiednim rozwiązaniem.

Możesz spróbować zobaczyć, jak to działa na przykładowym kodzie z dokumentacji API poniżej:

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

    function initialize() {
      var feed = new google.feeds.Feed("https://news.ycombinator.com/rss");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
<html>
  <head>    
     <script src="https://rss2json.com/gfapi.js"></script>
  </head>
  <body>
    <p><b>Result from the API:</b></p>
    <div id="feed"></div>
  </body>
</html>


3

Dla każdego, kto to czyta (od 2019 r.), Niestety większość implementacji odczytu JS RSS teraz nie działa. Po pierwsze, interfejs API Google został zamknięty, więc nie jest to już możliwe, a ze względu na politykę bezpieczeństwa CORS generalnie nie można teraz żądać kanałów RSS między domenami.

Korzystając z przykładu z https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) otrzymuję:

Access to XMLHttpRequest at 'https://feeds.feedburner.com/raymondcamdensblog?format=xml' from origin 'MYSITE' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Jest to poprawne i stanowi środek ostrożności ze strony końcowej witryny internetowej, ale teraz oznacza, że ​​powyższe odpowiedzi prawdopodobnie nie zadziałają.

Moim obejściem będzie prawdopodobnie przeanalizowanie kanału RSS przez PHP i zezwolenie javascript na dostęp do mojego PHP, zamiast próbować uzyskać dostęp do samego kanału docelowego.


1

Jeśli chcesz użyć zwykłego interfejsu API javascript, dobry przykład znajduje się na https://github.com/hongkiat/js-rss-reader/

Pełny opis na https://www.hongkiat.com/blog/rss-reader-in-javascript/

Używa fetchmetody jako metody globalnej, która asynchronicznie pobiera zasób. Poniżej znajduje się fragment kodu:

fetch(websiteUrl).then((res) => {
  res.text().then((htmlTxt) => {
    var domParser = new DOMParser()
    let doc = domParser.parseFromString(htmlTxt, 'text/html')
    var feedUrl = doc.querySelector('link[type="application/rss+xml"]').href
  })
}).catch(() => console.error('Error in fetching the website'))

Przykład w cytowanym artykule nie działa tak, jak jest. Musisz zmodyfikować wiersze 15 i 26 w rss.js, aby używać proxy CORS, aby działał. Jeśli tego nie zrobisz, wystąpią błędy z powodu zasady Same Origin: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/ ... Ponadto interfejs API pobierania nie działa w Microsoft Internet Explorer 11, raczej użyj XMLHTTPRequest: developer.microsoft.com/en-us/microsoft-edge/status/fetchapi Użyłem tego kodu źródłowego na własnym serwerze. Zachęcam do spędzenia czasu na sprawdzeniu przed wysłaniem.
gouessej

Problem CORS nie jest powiązany z tą odpowiedzią. Przeczytaj ponownie łącze CORS, o którym wspomniałeś, lub inne zasoby dotyczące rozwiązywania problemu z CORS stackoverflow.com/questions/10636611/… .
Alireza Fattahi

Nie, problem z CORS jest związany z Twoją odpowiedzią. Przykład z cytowanego artykułu nie może być użyty w takiej postaci, w jakiej jest i oczywiście to hosty ustawią te nagłówki, nie można tego naprawić po stronie klienta, jedyne obejście polega na użyciu proxy CORS. Czy kiedykolwiek próbowałeś kodu źródłowego wspomnianego w tym artykule?
gouessej

Oczywiście bez problemu używamy go w hybrydowej aplikacji mobilnej.
Alireza Fattahi

Współpracownik Mozilli, który zamknął moje pytanie dotyczące wykorzystania tego kodu źródłowego w moim własnym projekcie, doradził mi użycie proxy CORS. Może działać po stronie serwera, może w Node.JS, ale nie może działać po stronie klienta. Nie jestem jedyną osobą, która miała ten problem z tym kodem źródłowym i widziałem kilka komentarzy w podobnym artykule na temat sztuczek css: css-tricks.com/how-to-fetch-and-parse-rss-feeds-in -javascript /… Jesteś w bardzo szczególnym przypadku.
gouessej

0

Możesz użyć jquery-rss lub Vanilla RSS , który ma ładny szablon i jest bardzo łatwy w użyciu:

// Example for jquery.rss
$("#your-div").rss("https://stackoverflow.com/feeds/question/10943544", {
    limit: 3,
    layoutTemplate: '<ul class="inline">{entries}</ul>',
    entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

// Example for Vanilla RSS
const RSS = require('vanilla-rss');
const rss = new RSS(
    document.querySelector("#your-div"),
    "https://stackoverflow.com/feeds/question/10943544",
    { 
      // options go here
    }
);
rss.render().then(() => {
  console.log('Everything is loaded and rendered');
});

Zobacz http://jsfiddle.net/sdepold/ozq2dn9e/1/, aby zapoznać się z działającym przykładem.


0

Próbując znaleźć teraz dobre rozwiązanie, natknąłem się na wtyczkę FeedEk jQuery RSS / ATOM Feed , która świetnie radzi sobie z analizowaniem i wyświetlaniem kanałów RSS i Atom za pośrednictwem interfejsu API jQuery Feed . W przypadku podstawowego źródła RSS opartego na XML okazało się, że działa on jak urok i nie potrzebuje skryptów po stronie serwera ani innych obejść CORS, aby działał nawet lokalnie.


0

Byłem tak zirytowany wieloma mylącymi artykułami i odpowiedziami, że napisałem własny czytnik RSS: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- to-create-a-rss-reader-in-javascript /

Możesz użyć żądań AJAX do pobrania plików RSS, ale zadziała to wtedy i tylko wtedy, gdy używasz proxy CORS. Spróbuję napisać własne proxy CORS, aby zapewnić bardziej niezawodne rozwiązanie. W międzyczasie to działa, wdrożyłem go na moim serwerze w systemie Debian Linux.

Moje rozwiązanie nie korzysta z JQuery, używam tylko zwykłych, standardowych interfejsów API Javascript bez bibliotek innych firm i powinno działać nawet z Microsoft Internet Explorer 11.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.