Отображение RSS через JavaScript

Задача отобразить RSS на странице через JavaScript.

Для этого можно воспользоваться готовой JavaScript библиотекой для загрузки RSS:
         https://github.com/sdepold/jquery-rss

На странице в секцию head нужно добавить следующие ссылки на скрипты:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="https://raw.githubusercontent.com/sdepold/jquery-rss/gh-pages/src/jquery.rss.js"></script>

Для того, чтобы не сохранять скрипты локально они загружаются из CDN.

Далее в секции body нужно разместить тег, где будет отображаться загружаемая лента и скрипт, который будет выполнять загрузку. Например:

<script>
      jQuery(function($) {
        $("#rss-feeds").rss("http://feeds.feedburner.com/premiumpixels")
      })
</script>

<div id="rss-feeds"></div>
RSS лента будет загружена и отображена в нужном разделе.
Преимущество такого подхода заключается в том, что отображением RSS ленты можно гибко управлять, указывая различные опции:

$("#rss-feeds").rss(
  "http://feeds.feedburner.com/premiumpixels",
  {
    // Сколько записей отображать
    // по умолчанию: 4
    // тип: integer
    limit: 10,

    // смещение отображения результата
    // по умолчанию: false
    // тип: integer
    offsetStart: false, // начальаная точка смещения
    offsetEnd: false, // конечная точка смещения

    // выполнять запрос через https
    // по умолчанию: false
    // тип: false, true
    ssl: true,

    // через какой сервис парсить RSS
    // сервис реализован здесь: https://github.com/sdepold/feedr
    // по умолчанию: feedrapp.info
    // тип: string
    host: 'my-own-feedr-instance.com',

    // внешний шаблон html
    // по умолчанию: "<ul>{entries}</ul>"
    // тип: string
    layoutTemplate: "<div class='feed-container'>{entries}</div>",

    // внутренний шаблон для каждой записи
    // по умолчанию: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
    // тип: string
    entryTemplate: '<p>{title}</p>',

    // additional token definition for in-template-usage
    // по умолчанию: {}
    // тип: object/hash
    tokens: {
      foo: 'bar',
      bar: function(entry, tokens) { return entry.title }
    },

    // форматировать дату с помощью moment.js (необязательно)
    // по умолчанию: 'dddd MMM Do'
    // тип: смотри справку http://momentjs.com/docs/#/displaying/
    dateFormat: 'MMMM Do, YYYY',

    // форматировать дату на свой выбор. (необязательно)
    // эта функция возвращает форматированную дату.
    // применяется, если нужно форматировать дату без moment.js.
    // без использования moment.js и dateFormatFunction дата не будет форматироваться
    // и будет появляться как в RSS
    dateFormatFunction: function(date){},

    // эффект, используемый для отображения записей ленты
    // по умолчанию: 'show'
    // тип: 'show', 'slide', 'slideFast', 'slideSynced', 'slideFastSynced'
    effect: 'slideFastSynced',

    // функция обратного вызова при ошибках
    // по умолчанию: function() { throw new Error("jQuery RSS: url don't link to RSS-Feed") }
    error: function(){},

    // функция обратного вызова при успешной загрузке
    // по умолчанию: function(){}
    success: function(){},

    // функция обратного вызова, которая срабатывает, когда данные были загружены, но до отображения
    // полезно для отображения индикатора загрузки
    onData: function(){}
  },

  // функция обратного вызова, которая срабатывает, после успешной загрузки и выполнения анимации
  function callback() {}
)
 
 

Комментариев нет :

Отправить комментарий

Примечание. Отправлять комментарии могут только участники этого блога.