RSS Reader App

This is an RSS reader application using jQuery.

Tested Environment

  • Android 7.0
  • iOS 10.1.1

File Components

File Description
index.html The Startup page where RSS feeds will be loaded
loading.gif A loading image file A README file about this template
js/feed-reader.js A JavaScript file for retrieving the RSS feeds
js/phpjs_LICENSE.txt A license file (You can ignore this file.)
css/style.css Style Sheet for the application

Required JS/CSS Components

  • jQuery

Required Cordova Plugins

  • InAppBrowser

HTML Explanation


index.html is the Startup page.

The HTML body of this file is simply a placeholder of a loading.gif, the feed list and error message.

JavaScript Explanation


As soon as the application starts, the RSS feeds retrieval also begins. While loading the content of RSS feeds, loading.gif file is displayed. The following JavaScript code is used to invoke the RSS feeds retrieval function. This function is defined in feed-reader.js file which will be explained later in this page. You can try changing the RSS feeds URL.

//RSS Feeds URL
Feed.feedUrl = "";

$(function() {


When the RSS feeds retrieval function (Feed.load()) is called, the following JavaScript code is executed:

load: function() {
    var self = this;

      url: self.feedUrl,
      dataType: 'xml',
      crossDomain: true,
      success: function(data) {

        // Display RSS contents
        var $rss = $(data);
        $rss.find('item').each(function() {
          var $item = $(this);
      error : function() {
        $('#error-message').text('Failed to load RSS.');
      complete : function() {

If the function is executed successfully, the retrieved RSS feeds are listed in the Home screen as shown in the screenshot below.

The following JavaScript code corresponds to the display arrangment of RSS feeds in the Home screen (index.html):

createLiTag: function ($item) {
  var link = this.escape($item.find('link').text());
  var title = this.escape($item.find('title').text());
  var description = this.escape(strip_tags($item.find('description').text()));
  var date = new Date($item.find('pubDate').text());

  return '<li class="feed-item" data-link="' + link + '">' +
    '<time>' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '</time>' +
    '<h2>' + title + '</h2><p>' + description + '</p></li>';

The RSS feeds are displayed in a list view format. When click on each link of the feeds, it forwards to the corresponded URL in a ChildBrowser as shown below:

The following JavaScript code corresponds to the above function:

watchClick: function() {
  $('#feed-list').on('click', 'li', function() {
    var url =;
    if (/^http/.test(url)) {
      window.plugins.childBrowser.onClose = function() {};
    } else {
      alert('Invalid URL.');