Główna » Kodowanie » Jak utworzyć aplikację czytnika RSS w JavaScript

    Jak utworzyć aplikację czytnika RSS w JavaScript

    RSS (Really Simple Syndication) to standardowy format używany przez wydawców internetowych syndykować ich zawartość do innych stron i usług. Na Dokument RSS, znany również jako a karmić, jest Dokument XML przenoszenie treści, które wydawca chce rozpowszechniać.

    Kanały RSS są dostępne w prawie wszystkich internetowych serwisach informacyjnych i blogach dla swoich czytelników bądź na bieżąco z ich treścią. Można je również znaleźć na strony nie oparte na tekście np. YouTube, gdzie można wykorzystać kanał kanału YouTube poinformowany o najnowszych filmach.

    Programy, które uzyskują dostęp do tych kanałów i odczytują i wyświetlają ich zawartość Czytniki RSS. Możesz stworzyć prosty program czytający RSS w JavaScript. W tym samouczku zobaczymy, jak to zrobić.

    Struktura kanału RSS

    Kanał RSS ma element główny nazywa , podobny do tag znaleziony w dokumentach HTML. W środku tag, jest element, trochę jak w HTML to zawiera wiele podelementów zawierające rozproszoną zawartość strony internetowej.

    Pasza zwykle nosi kilka podstawowe informacje takie jak tytuł, adres URL i opis strony internetowej i poszczególne zaktualizowane posty, artykuły lub inne treści tej strony. Te informacje znajdują się w </code>, <code><link></code>, i <code><description></code> elementy, odpowiednio.</p> <p>Kiedy te znaczniki są <strong>bezpośrednio w środku <code><channel></code></strong>, posiadają tytuł, adres URL i opis strony internetowej. Kiedy są <strong>obecny w środku <code><item></code></strong> że <strong>przechowuje informacje o zaktualizowanych postach</strong>, reprezentują te same informacje, co poprzednio, ale informacje o poszczególnych treściach <code><item></code> przedstawiać.</p> <p>Jest też kilka <strong>opcjonalne elementy</strong> które mogą być obecne w kanale RSS, dostarczając dodatkowe informacje, takie jak obrazy lub prawa autorskie do dystrybuowanych treści. Możesz się o nich dowiedzieć <strong>Specyfikacja RSS 2.0</strong> w cyber.harvard.edu.</p> <p>Oto przykład tego, jak <strong>Kanał RSS strony internetowej</strong> może wyglądać tak:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Porady dotyczące projektowania, samouczek i inspiracje en-us Wizualizuj dowolny arkusz stylów CSS ze statystykami CSS Czy zastanawiałeś się kiedyś, ile reguł CSS znajduje się w arkuszu stylów? A może kiedykolwiek chciałeś zobaczyć… 18.05.2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - najnowsze urządzenie inteligentne zasilane przez Alexę Amazon nie jest obcy koncepcji systemów inteligentnego domu z wbudowanym asystentem cyfrowym. W końcu… 17.05.2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    Pobieranie kanału

    Musimy pobierz kanał z naszą aplikacją czytnika RSS. Na stronie internetowej może być adres URL kanału RSS znalezione wewnątrz tag za pomocą application / rss + xml rodzaj. Na przykład znajdziesz następujący kanał RSS na stronie Hongkiat.com.

    Po pierwsze, zobaczmy, jak to zrobić pobierz adres URL strony internetowej używając JavaScript.

     fetch (websiteUrl) .then ((res) => res.text (). then ((htmlTxt) => var domParser = new DOMParser () niech doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)). catch (() => console.error („Błąd podczas pobierania strony”))

    The sprowadzać() metoda jest globalną metodą asynchronicznie pobiera zasób. Jako argument pobiera adres URL zasobu (adres URL witryny w naszym kodzie). To zwraca a Obietnica obiekt, więc gdy metoda pomyślnie pobiera stronę (tj Obietnica jest spełniony), pierwsza funkcja wewnątrz następnie() komunikat obsługuje pobraną odpowiedź (res w powyższym kodzie).

    Pobierana jest wtedy odpowiedź w pełni wczytać do ciągu tekstowego używając tekst() metoda. Ten tekst reprezentuje Tekst HTML naszej pobranej strony internetowej. Lubić sprowadzać(), tekst() również zwraca a Obietnica obiekt. Tak więc, gdy pomyślnie utworzy tekst odpowiedzi ze strumienia odpowiedzi, następnie() obsłuży ten tekst odpowiedzi (htmlText w powyższym kodzie).

    Po udostępnieniu tekstu HTML strony używamy DOMParser API do parsuj go do dokumentu DOM. DOMParser analizuje ciąg tekstowy XML / HTML w dokumencie DOM. Jego metoda, parseFromString (), trwa dwa argumenty: the tekst do przeanalizowania i Typ zawartości.

    Następnie z utworzonego dokumentu DOM, my znaleźć href wartość odpowiedniego etykietka używając querySelector () metoda w celu uzyskania adresu URL kanału.

    Analizowanie i wyświetlanie kanału

    Po otrzymaniu adresu URL strony internetowej musimy pobierz i przeczytaj dokument RSS znaleziony pod tym adresem URL.

     fetch (feedUrl) .then ((res) => res.text (). then ((xmlTxt) => var domParser = nowy DOMParser () niech doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('item'). forEach ((item) => niech h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1))))

    W ten sam sposób, w jaki pobieraliśmy i analizowaliśmy stronę, teraz my Pobierz i przeanalizuj kanał XML do dokumentu DOM. Aby to osiągnąć, używamy „text / xml” typ zawartości w parseFromString () metoda.

    W analizowanym dokumencie my wybierz wszystkie elementy używając querySelectorAll metoda i przechodzić przez każdą z nich.

    Wewnątrz każdego elementu możemy znaczniki dostępu lubić </code>, <code><description></code>, i <code><link></code>, które niosą zawartość paszy. A nasza prosta aplikacja czytnika RSS jest gotowa, możesz stylizować zawartość pobieranych kanałów, jak chcesz.</p> <h4>Demo Github</h4> <p>Możesz sprawdzić <strong>bardziej szczegółowa wersja</strong> kodu użytego w tym poście w naszym repozytorium Github. Bardziej szczegółowa wersja <strong>pobiera trzy kanały</strong> (Mozilla Hacks, Hongkiat i blog Webkit) <strong>za pomocą pliku JSON</strong> a także dodaje kilka stylów CSS do czytnika RSS.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html"><img src="//savtec.org/img/images_7/how-to-create-a-secretly-disguised-folder-without-extra-software_11.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html">Jak utworzyć ukryty ukryty folder bez dodatkowego oprogramowania</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html"><img src="//savtec.org/img/images/how-to-create-a-secured-and-locked-folder-in-windows-xp.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html">Jak utworzyć zabezpieczony i zablokowany folder w systemie Windows XP</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/how-to-create-a-responsive-navigation.html"><img src="//savtec.org/img/images_2/how-to-create-a-responsive-navigation.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/how-to-create-a-responsive-navigation.html">Jak utworzyć responsywną nawigację</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Następny artykuł</div> <div class="post-img"><a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html"> <img src="//savtec.org/img/images_7/how-to-create-a-search-shortcut-on-the-desktop-in-windows-81_6.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">Jak utworzyć skrót wyszukiwania na pulpicie w Windows 8.1</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Poprzedni artykuł</div> <div class="post-img"><a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html"> <img src="//savtec.org/img/images/how-to-create-a-routine-with-amazon-alexa.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">Jak utworzyć procedurę z Amazon Alexa</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Przydatne informacje i wskazówki dotyczące tworzenia stron internetowych. Programowanie, projektowanie stron internetowych, CSS, HTML, JAVASCRIPT. Skonfiguruj i zainstaluj ponownie WINDOWS. Tworzenie witryn i aplikacji od podstaw. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>