如何在JavaScript中创建RSS阅读器应用程序

最新推荐文章于 2021-11-11 09:32:52 发布

cune1359

最新推荐文章于 2021-11-11 09:32:52 发布

阅读量737

点赞数

文章标签： python java js javascript html ViewUI

RSS（真正简单的联合组织）是一种在线发布者用来将其内容联合到其他网站和服务的标准化格式。 RSS文档 （也称为feed ）是一种XML文档 ，其中包含发布者希望分发的内容。

几乎所有在线新闻网站和博客都提供RSS feed，以使读者可以随时了解其内容 。它们也可以在非基于文本的网站（例如YouTube）上找到，您可以在其中使用YouTube频道的供稿来了解最新视频 。

访问这些提要并读取和显示其内容的程序称为RSS阅读器 。您可以使用JavaScript创建一个简单的RSS阅读器程序。在本教程中，我们将介绍如何操作。

RSS feed的结构

RSS feed 具有一个名为<rss> 的根元素 ，类似于HTML文档中的<html>标记。在<rss>标记内，有一个<channel>元素，类似于HTML中的<body> ，其中包括许多子元素 ， 这些子元素包含网站的分布式内容。

提要通常包含一些基本信息，例如标题，URL，网站描述以及该网站的各个更新帖子，文章或其他内容 。这些信息分别在<title> ， <link>和<description>元素中找到。

当这些标签直接出现在<channel>内部时 ，它们将包含网站的标题，URL和描述。当它们出现在<item> ，其中包含有关更新后的帖子的信息时 ，它们表示的信息与以前相同，只是每个<item>表示的单个内容的信息。

RSS提要中还可能存在一些可选元素 ，以提供补充信息，例如分布式内容上的图像或版权。您可以在cyber.harvard.edu的 RSS 2.0规范中了解它们。

这是一个网站RSS提要的样例：

<rss version="2.0">
  <channel>
    <title>Hongkiat</title>
    <link>https://www.hongkiat.com/</link>
    <description>Design Tips, Tutorial and Inspirations</description>
    <language>en-us</language>
    <item>
    	<title>Visualize Any CSS Stylesheet with CSS Stats</title>
    	<description>Ever wondered how many CSS rules
      are in a stylesheet? Or have you ever
      wanted to see…</description>
    	<pubDate>18/05/2017</pubDate>
    	<link>https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/</link>
    </item>
    <item>
    	<title>Amazon Echo Show – The Latest Alexa-powered Smart Device</title>
    	<description>Amazon isn't stranger to the concept of smart home
      systems with an embedded digital assistant.
      After all, the…</description>
    	<pubDate>17/05/2017</pubDate>
    	<link>https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/</link>
    </item>
  </channel>
</rss>

获取提要

我们需要使用RSS阅读器应用程序获取提要 。在网站上，可以使用application/rss+xml类型在<link>标记内找到 RSS feed的URL。例如，您可以在Hongkiat.com上找到以下RSS feed链接。

<link rel="alternate" type="application/rss+xml"
title="Hongkiat.com » Feed"
href="https://www.hongkiat.com/blog/feed/">

首先，让我们看看如何使用JavaScript 获取网站的Feed URL 。

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'))

fetch()方法是一种全局方法，它异步获取资源 。它以资源的URL作为参数（我们代码中网站的URL）。它返回一个Promise对象，因此当该方法成功获取网站时（即Promise已实现）， then()语句中的第一个函数将处理获取的响应 （上述代码中的res ）。

然后使用text()方法将获取的响应完全读入文本字符串 。该文本表示我们获取的网站的HTML文本 。与fetch() ， text()也返回Promise对象 。因此，当它成功地从响应流创建响应文本时， then()将处理该响应文本（以上代码中的htmlText ）。

网站HTML文本可用后，我们将使用DOMParser API将其解析为DOM文档 。 DOMParser将XML / HTML文本字符串解析为DOM文档。它的方法parseFromString()具有两个参数 ： 要解析的文本和内容类型 。

然后，从创建的DOM文档中，使用querySelector()方法找到相关<link>标记的href值，以获取供稿的URL。

解析并显示提要

获得网站的提要URL后，我们需要获取并阅读在该URL上找到的RSS文档 。

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

以与获取和解析网站相同的方式，现在我们获取XML提要并将其解析为DOM文档 。为此，我们在parseFromString()方法中使用'text/xml'内容类型。

在解析的文档中，我们使用querySelectorAll方法选择所有<item>元素 ，并遍历每个 元素。

在每个元素内，我们可以访问带有提要内容的标记，例如<title> ， <description>和<link> 。并且，我们简单的RSS阅读器应用程序已完成，您可以根据需要设置获取的提要内容的样式。

Github演示

您可以在我们的Github存储库中查看此帖子中使用的代码的更详细版本 。更详细的版本使用JSON文件 获取三个提要 （ Mozilla Hacks ，Hongkiat和Webkit博客），并且还向RSS阅读器添加了一些CSS样式。

翻译自: https://www.hongkiat.com/blog/rss-reader-in-javascript/

cune1359

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在JavaScript中创建RSS阅读器应用程序

RSS（真正简单的联合供稿）是一种在线发布者用来将其内容联合到其他网站和服务的标准化格式。 RSS文档（也称为feed ）是一种XML文档，其中包含发布者希望分发的内容。几乎所有在线新闻网站和博客都提供RSS feed，以使读者可以随时了解其内容。也可以在非基于文本的网站（例如YouTube）上找到它们，您可以在其中使用YouTube频道的供稿来了解最新视频。另请参阅： ...
复制链接

扫一扫