搜索或添加rss feed
Own RSS reader with Google feed API. I think every one faced with the task of connecting RSS feeds to your website, you can search and find some ready solutions (such as jQuery plugins), but also you can write your own script (which will smaller) and that will do it too. In this tutorial I’ll tell you how you can do it in pure javascript. Surfing web, I stumbled upon the Google Feed API, and thought that perhaps he would help me in this matter. Because using this service, I can easily (on-fly) to convert XML (of RSS) to JSON format. And as far as we know, javascript can easily work with JSON response. That’s what we will use, and now, lets check online demo.
拥有Google feed API的RSS阅读器。 我认为每个人都面临着将RSS源连接到您的网站的任务，您可以搜索并找到一些现成的解决方案(例如jQuery插件)，但是您也可以编写自己的脚本(该脚本会更小)，并且也可以做到这一点。 在本教程中，我将告诉您如何使用纯JavaScript做到这一点。 在网上冲浪时，我偶然发现了Google Feed API，并认为他可能会在这方面为我提供帮助。 因为使用了此服务，所以我可以轻松地(即时)将XML(RSS)转换为JSON格式。 据我们所知，javascript可以轻松处理JSON响应。 这就是我们将要使用的，现在让我们查看在线演示。
Here are samples and downloadable package:
以下是示例和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML (Step 1. HTML)
As usual, we start with the HTML. This is source code of our sample:
和往常一样，我们从HTML开始。 这是我们示例的源代码：
index.html (index.html)
<html>
<head>
<title>New own RSS reader demonstration</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="example">
<div class="post_results" id="post_results1" rss_num="8" rss_url="http://rss.news.yahoo.com/rss/topstories">
<div class="loading_rss">
<img alt="Loading..." src="images/loading.gif" />
</div>
</div>
<div class="post_results" id="post_results2" rss_num="8" rss_url="http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml">
<div class="loading_rss">
<img alt="Loading..." src="images/loading.gif" />
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
<html>
<head>
<title>New own RSS reader demonstration</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="example">
<div class="post_results" id="post_results1" rss_num="8" rss_url="http://rss.news.yahoo.com/rss/topstories">
<div class="loading_rss">
<img alt="Loading..." src="images/loading.gif" />
</div>
</div>
<div class="post_results" id="post_results2" rss_num="8" rss_url="http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml">
<div class="loading_rss">
<img alt="Loading..." src="images/loading.gif" />
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
As you can see – I prepared 2 DIV elements where going to load RSS feeds, in attributes (rss_url and rss_num) I pointing url of rss feed and amount of elements which going to display
如您所见–我准备了2个DIV元素，用于加载RSS feed，在属性(rss_url和rss_num)中，我指向rss feed的url和要显示的元素数量
步骤2. CSS (Step 2. CSS)
Here are single CSS file with all necessary styles:
这是具有所有必要样式的单个CSS文件：
css / main.css (css/main.css)
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:825px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.post_results {
margin: 5px;
width: 400px;
border:1px solid #444;
float:left;
}
.post_results ul {
list-style:none;
text-align:left;
padding:0;
margin: 0;
}
.post_results ul li {
background: #555555;
background: -moz-linear-gradient(top, #555555 0%, #444444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#444444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #555555 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #555555 0%,#444444 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #555555 0%,#444444 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #555555 0%,#444444 100%); /* W3C */
height: 60px;
padding: 10px;
}
.post_results ul li:hover{
background: #666;
}
.post_results ul li a{
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
margin-bottom:5px;
}
.post_results ul li a:hover{
color: #eee;
}
.post_results ul li p {
color: #ddd;
font-size: 13px;
margin: 0;
}
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:825px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.post_results {
margin: 5px;
width: 400px;
border:1px solid #444;
float:left;
}
.post_results ul {
list-style:none;
text-align:left;
padding:0;
margin: 0;
}
.post_results ul li {
background: #555555;
background: -moz-linear-gradient(top, #555555 0%, #444444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#444444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #555555 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #555555 0%,#444444 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #555555 0%,#444444 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #555555 0%,#444444 100%); /* W3C */
height: 60px;
padding: 10px;
}
.post_results ul li:hover{
background: #666;
}
.post_results ul li a{
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
margin-bottom:5px;
}
.post_results ul li a:hover{
color: #eee;
}
.post_results ul li p {
color: #ddd;
font-size: 13px;
margin: 0;
}
步骤3. JS (Step 3. JS)
Here are our main Javascript:
这是我们的主要Javascript：
js / main.js (js/main.js)
function myGetElementsByClassName(selector) {
if ( document.getElementsByClassName ) {
return document.getElementsByClassName(selector);
}
var returnList = new Array();
var nodes = document.getElementsByTagName('div');
var max = nodes.length;
for ( var i = 0; i < max; i++ ) {
if ( nodes[i].className == selector ) {
returnList[returnList.length] = nodes[i];
}
}
return returnList;
}
var rssReader = {
containers : null,
// initialization function
init : function(selector) {
containers = myGetElementsByClassName(selector);
for(i=0;i<containers.length;i++){
// getting necessary variables
var rssUrl = containers[i].getAttribute('rss_url');
var num = containers[i].getAttribute('rss_num');
var id = containers[i].getAttribute('id');
// creating temp scripts which will help us to transform XML (RSS) to JSON
var url = encodeURIComponent(rssUrl);
var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+num+'&q='+url+'&callback=rssReader.parse&context='+id;
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('charset','utf-8');
script.setAttribute('src',googUrl);
containers[i].appendChild(script);
}
},
// parsing of results by google
parse : function(context, data) {
var container = document.getElementById(context);
container.innerHTML = '';
// creating list of elements
var mainList = document.createElement('ul');
// also creating its childs (subitems)
var entries = data.feed.entries;
for (var i=0; i<entries.length; i++) {
var listItem = document.createElement('li');
var title = entries[i].title;
var contentSnippet = entries[i].contentSnippet;
var contentSnippetText = document.createTextNode(contentSnippet);
var link = document.createElement('a');
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_blank');
var text = document.createTextNode(title);
link.appendChild(text);
// add link to list item
listItem.appendChild(link);
var desc = document.createElement('p');
desc.appendChild(contentSnippetText);
// add description to list item
listItem.appendChild(desc);
// adding list item to main list
mainList.appendChild(listItem);
}
container.appendChild(mainList);
}
};
window.onload = function() {
rssReader.init('post_results');
}
function myGetElementsByClassName(selector) {
if ( document.getElementsByClassName ) {
return document.getElementsByClassName(selector);
}
var returnList = new Array();
var nodes = document.getElementsByTagName('div');
var max = nodes.length;
for ( var i = 0; i < max; i++ ) {
if ( nodes[i].className == selector ) {
returnList[returnList.length] = nodes[i];
}
}
return returnList;
}
var rssReader = {
containers : null,
// initialization function
init : function(selector) {
containers = myGetElementsByClassName(selector);
for(i=0;i<containers.length;i++){
// getting necessary variables
var rssUrl = containers[i].getAttribute('rss_url');
var num = containers[i].getAttribute('rss_num');
var id = containers[i].getAttribute('id');
// creating temp scripts which will help us to transform XML (RSS) to JSON
var url = encodeURIComponent(rssUrl);
var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+num+'&q='+url+'&callback=rssReader.parse&context='+id;
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('charset','utf-8');
script.setAttribute('src',googUrl);
containers[i].appendChild(script);
}
},
// parsing of results by google
parse : function(context, data) {
var container = document.getElementById(context);
container.innerHTML = '';
// creating list of elements
var mainList = document.createElement('ul');
// also creating its childs (subitems)
var entries = data.feed.entries;
for (var i=0; i<entries.length; i++) {
var listItem = document.createElement('li');
var title = entries[i].title;
var contentSnippet = entries[i].contentSnippet;
var contentSnippetText = document.createTextNode(contentSnippet);
var link = document.createElement('a');
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_blank');
var text = document.createTextNode(title);
link.appendChild(text);
// add link to list item
listItem.appendChild(link);
var desc = document.createElement('p');
desc.appendChild(contentSnippetText);
// add description to list item
listItem.appendChild(desc);
// adding list item to main list
mainList.appendChild(listItem);
}
container.appendChild(mainList);
}
};
window.onload = function() {
rssReader.init('post_results');
}
It is rather simple. When the page loads – I appending prepared javascript objects into our containers (div class="post_results"). That javascript asking google to convers RSS(XML) feed to JSON format using Google Feed API. After, script pass executing to ‘parse’ function of our object, that function convert JSON date into HTML presentation. So, in result – it loading our XML feed in HTML format. All pretty nice :)
这很简单。 页面加载后–我将准备好的javascript对象添加到我们的容器中(div class =“ post_results”)。 该JavaScript要求Google使用Google Feed API将RSS(XML)feed转换为JSON格式。 之后，脚本传递执行到我们对象的“解析”功能，该功能将JSON日期转换为HTML表示形式。 因此，结果–它以HTML格式加载我们的XML提要。 一切都很好:)
步骤4.图片 (Step 4. Images)
For our demo I used only one image (this is loading icon):
对于我们的演示，我只使用了一张图像(这是加载图标)：
现场演示
结论 (Conclusion)
Today’s lesson has demonstrated and Google Feed API, and how we can easily handle the received data and draw up (at client-side) result, using pure javascript. I hope you enjoyed our lesson. Good luck!
今天的课程已经演示了Google Feed API，以及如何使用纯JavaScript轻松处理接收到的数据并绘制(在客户端)结果。 希望您喜欢我们的课程。 祝好运！
翻译自: https://www.script-tutorials.com/creating-own-rss-reader-using-google-feed-api/
搜索或添加rss feed
扫一扫
1711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
