Домашня » Кодування » Як створити додаток RSS Reader у JavaScript

    Як створити додаток RSS Reader у JavaScript

    RSS (Really Simple Syndication) - це стандартизований формат, який використовують видавці в мережі синдикувати їх зміст на інші веб-сайти та служби. An Документ RSS, також відомий як a корм, є XML-документ несе вміст, який видавець бажає розповсюджувати.

    RSS-канали доступні практично на всіх веб-сайтах та блогах для онлайн-новин для своїх читачів залишайтеся в курсі їхнього вмісту. Їх також можна знайти на нетекстові веб-сайти наприклад, YouTube, де можна використовувати канал каналу YouTube повідомили про останні відео.

    Називаються програми, які отримують доступ до цих каналів, а також читають і показують їх вміст Читачі RSS. Ви можете створити просту програму для читання RSS у JavaScript. У цьому підручнику ми побачимо, як це зробити.

    Структура каналу RSS

    Канал RSS має кореневий елемент називається , схожий на тег знайдено в документах HTML. Всередині тег, є елемент, начебто подібний в HTML, що включає в себе безліч суб-елементів містить розповсюджений вміст веб-сайту.

    Живлення зазвичай несе Основна інформація такі як назва, URL-адреса та опис веб-сайту та веб-сайту окремі оновлені публікації, статті або інший вміст цього веб-сайту. Цю інформацію можна знайти в </code>, <code><link></code>, і <code><description></code> елементів, відповідно.</p> <p>Коли ці теги є <strong>безпосередньо присутній всередині <code><channel></code></strong>, вони містять назву, URL-адресу та опис веб-сайту. Коли вони <strong>присутній всередині <code><item></code></strong> що <strong>містить інформацію про оновлені публікації</strong>, вони являють собою ту ж саму інформацію, що й раніше, але й інформацію про окремий вміст, що кожен <code><item></code> представляти.</p> <p>Є також деякі <strong>необов'язкові елементи</strong> які можуть бути присутніми в каналі RSS, надаючи додаткову інформацію, таку як зображення або авторські права на розповсюджуваний контент. Про них можна дізнатися в цьому <strong>Специфікація RSS 2.0</strong> на cyber.harvard.edu.</p> <p>Ось приклад того, як <strong>RSS-канал веб-сайту</strong> може виглядати так:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Дизайн поради, підручник і натхнення en-us Візуалізуйте будь-яку таблицю стилів CSS зі статистикою CSS Ви коли-небудь замислювалися, скільки правил CSS в таблиці стилів? Або ви хотіли бачити ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Останній смартфон на базі Алекса Amazon не чуже концепції розумних домашніх систем з вбудованим цифровим помічником. Адже… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    Отримання каналу

    Ми потребуємо витягувати канал з нашою програмою для читання RSS. На веб-сайті може бути URL-адреса каналу RSS знайдено всередині з використанням тега application / rss + xml тип. Наприклад, на сайті Hongkiat.com можна знайти посилання на канал RSS.

    Спочатку подивимося, як це зробити отримати URL-адресу каналу веб-сайту використовуючи JavaScript.

     fetch (websiteUrl). then ((res) => res.text ().) потім ((htmlTxt) => var domParser = новий DOMParser () дозволить doc = domParser.parseFromString feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)).) catch (() => console.error ("Помилка при виборі веб-сайту"))

    The fetch () Метод є глобальним методом, який асинхронно вибирає ресурс. URL-адреса ресурсу приймається як аргумент (URL-адреса веб-сайту в нашому коді). Це повертає a Обіцянка об'єкт, тому, коли метод успішно вибирає веб-сайт (тобто Обіцянка виконується), перша функція всередині потім() заяву обробляє отриманий відповідь (res у наведеному вище коді).

    Потім отриманий відповідь повністю прочитати в текстовий рядок за допомогою текст () метод. Цей текст являє собою Текст HTML нашого придбаного веб-сайту. Люблю fetch (), текст () також повертає a Обіцянка об'єкт. Отже, при успішному створенні тексту відповіді з потоку відповідей, потім() оброблятиме цей текст відповіді (htmlText у наведеному вище коді).

    Як тільки HTML-текст сайту доступний, ми використовуємо API DOMParser до розібрати його в документ DOM. DOMParser аналізує текстовий рядок XML / HTML у документ DOM. Її метод, parseFromString (), бере два аргументи: текст, який потрібно проаналізувати і тип вмісту.

    Потім з створеного документа DOM ми знайди href значення відповідного тег за допомогою querySelector () метод, щоб отримати URL-адресу каналу.

    Розбір та відображення каналу

    Як тільки ми отримали URL-адресу каналу веб-сайту, нам потрібно вибирати та читати документ RSS знайдено за цією URL-адресою.

     fetch (feedUrl). then ((res) => res.text ().) ((xmlTxt) => var domParser = новий DOMParser () доз. doc = domParser.parseFromString forEach ((item) => нехай h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1))))

    Так само, як ми прибирали та аналізували веб-сайт, тепер ми отримати і проаналізувати канал XML у документ DOM. Для цього ми використовуємо 'text / xml' тип вмісту в parseFromString () метод.

    У розібраному документі ми виберіть усі елементи за допомогою querySelectorAll метод і петля через кожну.

    Усередині кожного елемента ми можемо теги доступу люблю </code>, <code><description></code>, і <code><link></code>, що несуть вміст корму. Наші прості програми для читання RSS-файлів робляться, ви можете накреслити вміст завантажених каналів за вашим бажанням.</p> <h4>Демо Github</h4> <p>Ви можете перевірити <strong>більш детальна версія</strong> коду, який використовується в цій посаді в нашому Github repo. Більш детальна версія <strong>отримує три канали</strong> (Mozilla Hacks, Hongkiat і блог Webkit) <strong>за допомогою файлу JSON</strong> а також додає деякі стилі CSS до читача 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">Як створити таємно замасковану папку без додаткового програмного забезпечення</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">Як створити захищену і заблоковану папку в 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">Як створити адаптивну навігацію</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">Наступна стаття</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">Як створити ярлик пошуку на робочому столі в Windows 8.1</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Попередня стаття</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">Як створити рутину з Amazon Alexa. T</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"> Корисна інформація та поради по веб-розробці. Програмування, веб-дизайн, CSS, HTML, JAVASCRIPT. Налагодження та перевстановлення WINDOWS. Створення сайтів і додатків з нуля. </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>