使用jQuery get rss(带有JavaScript)来获取博客(或网站),以在您的网页上显示rss feed。 使用Google Ajax Feed API检索提要项,并将其作为要显示的提要项列表返回 。 然后可以根据您的样式自定义Feed,以适合您的外观-例如,可以将其用作jQuery新闻聚合器。
jQuery RSS插件功能
- 网页加载时自动加载RSS提要
- 刷新按钮以实时刷新jQuery rss feed阅读器
- 您可以添加多个RSS供稿
- 您可以指定返回的提要项的限制
- 读取RSS供稿时显示加载按钮
jQuery RSS插件代码
jQuery RSS插件主要使用JavaScript调用google.load(feed)以获取rss供稿项。
var gfeedfetcher_loading_image="/images/page-images/loader.gif" //Full URL to "loading" image. No need to config after this line!!
google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
function gfeedfetcher(divid, divClass, linktarget){
this.linktarget=linktarget || "" //link target of RSS entries
this.feedlabels=[] //array holding lables for each RSS feed
this.feedurls=[]
this.feeds=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
this.feedsfetched=0 //number of feeds fetched
this.feedlimit=5
this.showoptions="" //Optional components of RSS entry to show (none by default)
this.sortstring="date" //sort by "date" by default
document.write('
') //output div to contain RSS entries
this.feedcontainer=document.getElementById(divid)
this.itemcontainer="
- " //default element wrapping around each RSS entry item } gfeedfetcher.prototype.addFeed=function(label, url){ this.feedlabels[this.feedlabels.length]=label this.feedurls[this.feedurls.length]=url } gfeedfetcher.prototype.filterfeed=function(feedlimit, sortstr){ this.feedlimit=feedlimit if (typeof sortstr!="undefined") this.sortstring=sortstr } gfeedfetcher.prototype.displayoptions=function(parts){ this.showoptions=parts //set RSS entry options to show ("date, datetime, time, snippet, label, description") } gfeedfetcher.prototype.setentrycontainer=function(containerstr){ //set element that should wrap around each RSS entry item this.itemcontainer="< "+containerstr.toLowerCase()+">" } gfeedfetcher.prototype.init=function(){ this.feedsfetched=0 //reset number of feeds fetched to 0 (in case init() is called more than once) this.feeds=[] //reset feeds[] array to empty (in case init() is called more than once) this.feedcontainer.innerHTML='
' var displayer=this for (var i=0; i 0 && this.feedlimit>this.feedurls.length && i==this.feedurls.length-1) //If this is the last RSS feed, and feedlimit/feedurls.length yields a remainder items_to_show+=(this.feedlimit%this.feedurls.length) //Add that remainder to the number of entries to show for last RSS feed feedpointer.setNumEntries(items_to_show) //set number of items to display feedpointer.load(function(label){ return function(r){ displayer._fetch_data_as_array(r, label) } }(this.feedlabels[i])) //call Feed.load() to retrieve and output RSS feed. } } gfeedfetcher._formatdate=function(datestr, showoptions){ var itemdate=new Date(datestr) var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : (showoptions.indexOf("time")!=-1)? itemdate.toLocaleTimeString() : "" return " "+parseddate+" " } gfeedfetcher._sortarray=function(arr, sortstr){ var sortstr=(sortstr=="label")? "ddlabel" : sortstr //change "label" string (if entered) to "ddlabel" instead, for internal use if (sortstr=="title" || sortstr=="ddlabel"){ //sort array by "title" or "ddlabel" property of RSS feed entries[] arr.sort(function(a,b){ var fielda=a[sortstr].toLowerCase() var fieldb=b[sortstr].toLowerCase() return (fielda fieldb)? 1 : 0 }) } else{ //else, sort by "publishedDate" property (using error handling, as "publishedDate" may not be a valid date str if an error has occured while getting feed try{ arr.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)}) } catch(err){} } } gfeedfetcher.prototype._fetch_data_as_array=function(result, ddlabel){ var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed if (thisfeed==""){ //if error has occured fetching feed alert("Some blog posts could not be loaded: "+result.error.message) } for (var i=0; i ")? "Loading blog feeds...
-
n" : "" gfeedfetcher._sortarray(feeds, this.sortstring) for (var i=0; i
" + feeds[i].title + "" var itemlabel=/label/i.test(this.showoptions)? '
['+this.feeds[i].ddlabel+'] ' : " " var itemdate=gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions) var itemdescription=/description/i.test(this.showoptions)? "
"+feeds[i].content : /snippet/i.test(this.showoptions)? "
"+feeds[i].contentSnippet : "" rssoutput+=this.itemcontainer + itemtitle + " " + itemlabel + " " + itemdate + "n" + itemdescription + this.itemcontainer.replace("< ", "") + "nn" } rssoutput+=(this.itemcontainer==" - ")? "
-
n" : "" gfeedfetcher._sortarray(feeds, this.sortstring) for (var i=0; i
" + feeds[i].title + "" var itemlabel=/label/i.test(this.showoptions)? '
['+this.feeds[i].ddlabel+'] ' : " " var itemdate=gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions) var itemdescription=/description/i.test(this.showoptions)? "
HTML代码
CSS代码
/** RSS FEED **/ .labelfield{ color:brown; font-size: 90%; } .datefield{ color:gray; font-size: 90%;} #rssfeeds a{ color: purple;text-decoration: none;font-weight: bold;} #rssfeeds p{ margin-bottom: 2px;} code{ color: red;} #blogoolafeed, #blogoolafeed a { color:white; } #blogoolafeed a:hover{ color:#8E7BD3; } #blogoolafeed ul { margin-left:-15px } #rssfeed-wrap { text-align:left; margin-left:15px; }
插件来源:http://www.dynamicdrive.com
From: https://www.sitepoint.com/jquery-rss-feed-display-live/