Hjemmeside » Coding » Sådan oprettes en RSS Reader App i JavaScript

    Sådan oprettes en RSS Reader App i JavaScript

    RSS (Really Simple Syndication) er et standardiseret format, der bruges af udgivere online til syndikere deres indhold til andre hjemmesider og tjenester. en RSS-dokument, også kendt som a foder, er en XML-dokument bærer det indhold, som en udgiver ønsker at distribuere.

    RSS-feeds er tilgængelige på næsten alle online nyhedswebsteder og blogs for deres læsere til Hold dig ajour med deres indhold. De kan også findes på ikke-tekstbaserede hjemmesider f.eks. YouTube, hvor du kan bruge feedet fra en YouTube-kanal til at være informeret om de nyeste videoer.

    Programmer, der får adgang til disse feeds, og læser og viser deres indhold kaldes RSS læsere. Du kan oprette et simpelt RSS-læserprogram i JavaScript. I denne vejledning ser vi hvordan.

    Struktur af et RSS-feed

    Et RSS-feed har et rodelement hedder , svarende til tag fundet i HTML-dokumenter. Inde i tag, der er en element, slags lignende i HTML, det indeholder mange underelementer indeholdende det distribuerede indhold på hjemmesiden.

    Et foder bærer normalt nogle grundlæggende oplysninger såsom titel, URL og beskrivelse af hjemmesiden og af individuelle opdaterede indlæg, artikler eller andet indhold af denne hjemmeside. Disse oplysninger findes i </code>, <code><link></code>, og <code><description></code> elementer.</p> <p>Når disse tags er <strong>direkte til stede indeni <code><channel></code></strong>, de har titel, URL og beskrivelse af hjemmesiden. Når de er <strong>nuværende inde <code><item></code></strong> at <strong>Indeholder oplysningerne om de opdaterede indlæg</strong>, de repræsenterer de samme oplysninger som før, men det for de enkelte indhold, som hver <code><item></code> repræsentere.</p> <p>Der er også nogle <strong>valgfrie elementer</strong> der kan være til stede i et RSS-feed, der giver supplerende oplysninger som billeder eller ophavsrettigheder på det distribuerede indhold. Du kan lære om dem i dette <strong>RSS 2.0 specifikation</strong> på cyber.harvard.edu.</p> <p>Her er et eksempel på hvordan <strong>RSS feed af en hjemmeside</strong> kan se ud:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Design Tips, Tutorial og Inspirations en-os Visualiser ethvert CSS-formatark med CSS-statistikker Har du nogensinde spekuleret på, hvor mange CSS-regler der findes i et stylesheet? Eller har du nogensinde ønsket at se ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Den seneste Alexa-powered Smart Device Amazon er ikke fremmed for begrebet smart home-systemer med en integreret digital assistent. Trods alt 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    Henter feedet

    Vi er nødt til hent foderet med vores RSS-læserapplikation. På et websted kan webadressen til et RSS-feed være fundet inde i tag ved hjælp af application / rss + xml type. For eksempel finder du følgende RSS feed link på Hongkiat.com.

    Lad os først se hvordan få feed-URL'en til en hjemmeside ved hjælp af JavaScript.

     hent (websiteUrl) .then ((res) => res.text () .hen ((htmlTxt) => var domParser = ny DOMParser () lad doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href))) .fang (() => console.error ('Fejl ved hentning af hjemmesiden'))

    Det fetch () Metoden er en global metode der asynkront henter en ressource. Det tager URL'en til ressourcen som et argument (webadressen på hjemmesiden i vores kode). Det returnerer a Løfte objekt, så når metoden med held henter hjemmesiden (dvs. Løfte er opfyldt), den første funktion inde i derefter() udmelding håndterer det hentede svar (res i ovenstående kode).

    Det hentede svar er da læses fuldt ud i en tekststreng bruger tekst() metode. Denne tekst repræsenterer HTML-tekst på vores hentede hjemmeside. Synes godt om fetch (), tekst() også returnerer a Løfte objekt. Så når det med succes opretter en svartekst fra responsstrømmen, derefter() vil håndtere denne svartekst (htmlText i ovenstående kode).

    Når HTML-tekst på hjemmesiden er tilgængelig, bruger vi DOMParser API til analysere det i et DOM-dokument. DOMParser analyserer en XML / HTML-tekststreng i et DOM-dokument. Dens metode, parseFromString (), tager to argumenter: det tekst, der skal analyseres og indholdstype.

    Derefter fra det oprettede DOM dokument, vi Find href værdien af ​​den relevante tag bruger querySelector () metode for at få URL'en til feedet.

    Parsering og visning af feedet

    Når vi har fået webadressens feed-URL, skal vi hent og læs RSS-dokumentet fundet på den webadresse.

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

    På samme måde som vi hentede og analyserede hjemmesiden, nu vi få og analysere XML-feedet i et DOM-dokument. For at opnå dette bruger vi 'Text / xml' indholdstype i parseFromString () metode.

    I det analyserede dokument, vi vælg alle de elementer bruger querySelectorAll metode og loop gennem hver.

    Inde i hvert element kan vi adgangskoder synes godt om </code>, <code><description></code>, og <code><link></code>, der bærer foderindholdet. Og vores enkle RSS-læserapplikation er færdig, og du kan indstille indholdet af de hentede feeds, som du ønsker.</p> <h4>Github demo</h4> <p>Du kan tjekke ud <strong>mere detaljeret version</strong> af koden der bruges i dette indlæg i vores Github repo. Den mere detaljerede version <strong>henter tre strømme</strong> (Mozilla Hacks, Hongkiat og Webkit blog) <strong>ved hjælp af en JSON-fil</strong> og tilføjer også nogle CSS-stilarter til RSS-læseren.</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">Sådan opretter du en hemmeligt skjult mappe uden ekstra software</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">Sådan oprettes en sikret og låst mappe i 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">Sådan oprettes en responsiv navigation</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">Næste artikel</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">Sådan oprettes en genvejssøgning på skrivebordet i Windows 8.1</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Forrige artikel</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">Sådan oprettes en rutine med 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"> Nyttige oplysninger og tips til webudvikling. Programmering, webdesign, CSS, HTML, JAVASCRIPT. Konfigurer og geninstaller WINDOWS. Oprettelse af websteder og applikationer fra bunden. </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>