Задача отобразить RSS на странице через JavaScript.
Для этого можно воспользоваться готовой JavaScript библиотекой для загрузки RSS:
https://github.com/sdepold/jquery-rss
На странице в секцию head нужно добавить следующие ссылки на скрипты:
Для того, чтобы не сохранять скрипты локально они загружаются из CDN.
Далее в секции body нужно разместить тег, где будет отображаться загружаемая лента и скрипт, который будет выполнять загрузку. Например:
Преимущество такого подхода заключается в том, что отображением RSS ленты можно гибко управлять, указывая различные опции:
Для этого можно воспользоваться готовой 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() {} )
Комментариев нет :
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.