jQuery로 RSS 구문 분석
jQuery를 사용하여 RSS 피드를 구문 분석하고 싶습니다. 기본 jQuery 라이브러리를 사용 하여이 작업을 수행 할 수 있습니까? 아니면 플러그인을 사용해야합니까?
경고
구글 피드 API는 공식적으로 사용되지 및 더 이상 작동하지 않습니다 !
전체 플러그인이 필요하지 않습니다. 콜백 함수에 RSS를 JSON 객체로 반환합니다.
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
jFeed -jQuery RSS / Atom 플러그인을 사용하십시오 . 문서에 따르면 다음과 같이 간단합니다.
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});
우리가 늦게 토론을하려는 사람들을 위해, 1.5부터 jQuery는 내장 된 XML 파싱 기능을 가지고있어서 플러그인이나 서드 파티 서비스없이 이것을 쉽게 할 수 있습니다. parseXml 함수가 있으며 $ .get 함수를 사용할 때 xml을 자동 구문 분석합니다. 예 :
$.get(rssurl, function(data) {
var $xml = $(data);
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
//Do something with item here...
});
});
jFeed는 IE에서 작동하지 않습니다.
zRSSFeed를 사용하십시오 . 5 분 안에 작동 했어
function getFeed(sender, uri) {
jQuery.getFeed({
url: 'proxy.php?url=' + uri,
success: function(feed) {
jQuery(sender).append('<h2>'
+ '<a href="'
+ feed.link
+ '">'
+ feed.title
+ '</a>'
+ '</h2>');
var html = '';
for(var i = 0; i < feed.items.length && i < 5; i++) {
var item = feed.items[i];
html += '<h3>'
+ '<a href="'
+ item.link
+ '">'
+ item.title
+ '</a>'
+ '</h3>';
html += '<div class="updated">'
+ item.updated
+ '</div>';
html += '<div>'
+ item.description
+ '</div>';
}
jQuery(sender).append(html);
}
});
}
<div id="getanewbrowser">
<script type="text/javascript">
getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
</script>
</div>
멋진 템플릿과 함께 제공되며 사용하기 매우 쉬운 jquery-rss 도 사용할 수 있습니다 .
$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
limit: 3,
layoutTemplate: '<ul class="inline">{entries}</ul>',
entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})
수율 (2013 년 9 월 18 일 기준) :
<div id="your-div">
<ul class="inline">
<entries></entries>
</ul>
<ul class="inline">
<li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
<li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
<li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
</ul>
</div>
실제 예제는 http://jsfiddle.net/jhfrench/AFHfn/ 을 참조하십시오 .
RSS 데이터가 개인 정보가 아닌 한 Google AJAX Feed API를 사용하십시오. 물론 빠릅니다.
https://developers.google.com/feed/
업데이트 [ 4/25/2016 ] 이제 GitHub.jQRSS 에서 호스팅되는 더 많은 옵션과 기능으로 더 잘 작성되고 완전히 지원되는 버전
Nathan Strutz 의 Selected Answer 를 보았지만 jQuery 플러그인 페이지 링크가 여전히 다운되어 해당 사이트의 홈 페이지가로드되지 않은 것 같습니다. 나는 몇 가지 다른 솔루션을 시도했으며 대부분이 구식 일뿐 만 아니라 EASY라는 것을 알았습니다 ! 따라서 나는 모자를 버리고 내 플러그인을 만들었고 여기에 죽은 링크가 있으면 대답을 제출하기에 좋은 곳 인 것 같습니다. 2012 년에이 답변을 찾고 있다면 (2013 년부터 b 년까지) 내가했던 것처럼 죽은 링크와 오래된 조언에 대한 좌절감을 느낄 수 있습니다. 아래는 플러그인에 대한 코드뿐만 아니라 최신 플러그인 예제에 대한 링크입니다 ! 코드를 JS 파일로 복사하고 다른 플러그인처럼 헤더에 연결하면됩니다. 사용은 매우 EZ입니다!
jsFiddle
플러그인 코드 2/
9/2015-console명령을 보내기 전에 확인해야 할 연체 업데이트가 오래 되었습니다! 오래된 IE 문제에 도움이됩니다.
(function($) {
if (!$.jQRSS) {
$.extend({
jQRSS: function(rss, options, func) {
if (arguments.length <= 0) return false;
var str, obj, fun;
for (i=0;i<arguments.length;i++) {
switch(typeof arguments[i]) {
case "string":
str = arguments[i];
break;
case "object":
obj = arguments[i];
break;
case "function":
fun = arguments[i];
break;
}
}
if (str == null || str == "") {
if (!obj['rss']) return false;
if (obj.rss == null || obj.rss == "") return false;
}
var o = $.extend(true, {}, $.jQRSS.defaults);
if (typeof obj == "object") {
if ($.jQRSS.methods.getObjLength(obj) > 0) {
o = $.extend(true, o, obj);
}
}
if (str != "" && !o.rss) o.rss = str;
o.rss = escape(o.rss);
var gURL = $.jQRSS.props.gURL
+ $.jQRSS.props.type
+ "?v=" + $.jQRSS.props.ver
+ "&q=" + o.rss
+ "&callback=" + $.jQRSS.props.callback;
var ajaxData = {
num: o.count,
output: o.output,
};
if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
if (o.userip != null) ajaxData.scoring = o.userip;
$.ajax({
url: gURL,
beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
dataType: o.output != "xml" ? "json" : "xml",
data: ajaxData,
type: "GET",
xhrFields: { withCredentials: true },
error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
success: function (data, textStatus, jqXHR) {
var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
if (window['console']) {
console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
console.log(new Array(70).join('-'));
}
if (fun) {
return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
}
else {
return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
}
}
});
}
});
$.jQRSS.props = {
callback: "?",
gURL: "http://ajax.googleapis.com/ajax/services/feed/",
scoring: "h",
type: "load",
ver: "1.0"
};
$.jQRSS.methods = {
getObjLength: function(obj) {
if (typeof obj != "object") return -1;
var objLength = 0;
$.each(obj, function(k, v) { objLength++; })
return objLength;
}
};
$.jQRSS.defaults = {
count: "10", // max 100, -1 defaults 100
historical: false,
output: "json", // json, json_xml, xml
rss: null, // url OR search term like "Official Google Blog"
userip: null
};
}
})(jQuery);
사용하다
// Param ORDER does not matter, however, you must have a link and a callback function
// link can be passed as "rss" in options
// $.jQRSS(linkORsearchString, callbackFunction, { options })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ })
$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })
$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })
$ .jQRSS ( '링크 대신 단어 검색', function (feed) {/ * do work * /})
// TODO : 수정 필요
옵션
{
count: // default is 10; max is 100. Setting to -1 defaults to 100
historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache.
output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
rss: // simply an alternate place to put news feed link or search terms
userip: // as this uses Google API, I'll simply insert there comment on this:
/* Reference: https://developers.google.com/feed/v1/jsondevguide
This argument supplies the IP address of the end-user on
whose behalf the request is being made. Google is less
likely to mistake requests for abuse when they include
userip. In choosing to utilize this parameter, please be
sure that you're in compliance with any local laws,
including any laws relating to disclosure of personal
information being sent.
*/
}
(function(url, callback) {
jQuery.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
var entries = feed.entries, feedList = '';
for (var i = 0; i < entries.length; i++) {
feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
}
jQuery('.feed > ul').append(feedList);
});
<div class="feed">
<h4>Hacker News</h4>
<ul></ul>
</div>
@Andrew에 동의합니다 .Google을 사용하면 XML 대신 JSON을 다시 얻을 수 있다는 큰 이점으로 견고하고 재사용 가능한 방법입니다. Google을 프록시로 사용하는 또 다른 이점은 데이터에 대한 직접 액세스를 차단할 수있는 서비스가 Google을 중지시킬 가능성이 없다는 것입니다. 다음은 스키 보고서 및 조건 데이터를 사용하는 예입니다. 여기에는 모든 일반적인 실제 응용 프로그램이 있습니다 .1) 타사 RSS / XML 2) JSONP 3) 원하는 방식으로 데이터를 정확하게 얻을 수 없을 때 문자열 및 배열을 배열로 정리 4)로드시 요소를 DOM. 이것이 어떤 사람들을 돕기를 바랍니다!
<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">
function displaySkiReport (feedResponse) {
// Get ski report content strings
var itemString = feedResponse.entries[0].content;
var publishedDate = feedResponse.entries[0].publishedDate;
// Clean up strings manually as needed
itemString = itemString.replace("Primary: N/A", "Early Season Conditions");
publishedDate = publishedDate.substring(0,17);
// Parse ski report data from string
var itemsArray = itemString.split("/");
//Build Unordered List
var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
html += '<ul>';
html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
// Last 48 Hours
html += '<li>' + itemsArray[1] + '</li>';
// Snow condition
html += '<li>' + itemsArray[2] + '</li>';
// Base depth
html += '<li>' + itemsArray[3] + '</li>';
html += '<li>Ski Report Date: ' + publishedDate + '</li>';
html += '</ul>';
$('body').append(html);
}
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
$(document).ready(function() {
// Ski report
parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);
});
</script>
jFeed는 이전 버전의 jQuery에서만 작동하는 다소 쓸모가 없습니다. 업데이트 된 지 2 년이 지났습니다.
zRSSFeed는 다소 융통성이 없지만 사용하기 쉽고 현재 버전의 jQuery (현재 1.4)에서 작동합니다. http://www.zazar.net/developers/zrssfeed/
다음은 zRSSFeed 문서의 간단한 예입니다.
<div id="test"><div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 5
});
});
</script>
피드에 yql과 함께 jquery를 사용하고 있습니다. 당신은 yql과 트위터, RSS, 버즈를 검색 할 수 있습니다. http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ 에서 읽었습니다 . 그것은 나에게 매우 유용합니다.
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
function loadFeed(){
$.getFeed({
url: 'url=http://sports.espn.go.com/espn/rss/news/',
success: function(feed) {
//Title
$('#result').append('<h2><a href="' + feed.link + '">' + feed.title + '</a>' + '</h2>');
//Unordered List
var html = '<ul>';
$(feed.items).each(function(){
var $item = $(this);
//trace( $item.attr("link") );
html += '<li>' +
'<h3><a href ="' + $item.attr("link") + '" target="_new">' +
$item.attr("title") + '</a></h3> ' +
'<p>' + $item.attr("description") + '</p>' +
// '<p>' + $item.attr("c:date") + '</p>' +
'</li>';
});
html += '</ul>';
$('#result').append(html);
}
});
}
</script>
FeedEk 을 사용하는 것이 좋습니다 . Google Feed API가 공식적으로 더 이상 사용되지 않으면 대부분의 플러그인이 작동하지 않습니다. 그러나 FeedEk는 여전히 작동합니다. 사용하기 매우 쉽고 다양한 옵션을 사용자 지정할 수 있습니다.
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss'
});
옵션으로
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:'_blank',
DateFormat: 'MM/DD/YYYY',
DateFormatLang:'en'
});
Google이 캐시 한 google ajax api 및 원하는 출력 형식을 사용하십시오 .
코드 샘플; http://code.google.com/apis/ajax/playground/#load_feed
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
* How to load a feed via the Feeds API.
*/
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("content");
container.innerHTML = '';
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
}
function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>
zRSSfeed 는 jQuery를 기반으로 하며 간단한 테마는 훌륭합니다.
시도 해봐.
jQuery-rss 프로젝트 는 매우 가벼우 며 특정 스타일을 적용하지 않습니다.
구문은 다음과 같이 간단 할 수 있습니다.
$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")
http://jsfiddle.net/jhfrench/AFHfn/에서 실제 예제를 참조하십시오.
jQuery 피드 는 훌륭한 옵션으로, 내장 템플릿 시스템이 있으며 Google 피드 API를 사용하므로 도메인 간 지원이 가능합니다.
Superfeedr 는 jquery 플러그인 을 가지고 있습니다. 교차 출처 정책 문제가 없으며 업데이트가 실시간으로 전파됩니다.
jFeed는 쉽고 테스트 할 예제 가 있습니다. 그러나 다른 서버에서 피드를 구문 분석하는 경우 피드 서버에서 CORS ( Cross Origin Resource Sharing) 를 허용해야 합니다. 브라우저 지원 도 확인 해야합니다 .
샘플을 업로드 했지만 http 프로토콜을 통해 예제의 URL을 example.com/feed.rss와 같은 것으로 변경했을 때 IE의 지원을받지 못했습니다. CORS는 IE 8 이상에서 지원되어야하지만 jFeed 예제는 피드를 렌더링하지 않았습니다.
가장 좋은 방법은 Google API를 사용하는 것입니다 :
https://developers.google.com/feed/v1/devguide
참조 :
https://github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors
참고 URL : https://stackoverflow.com/questions/226663/parse-rss-with-jquery
'IT story' 카테고리의 다른 글
| C ++에서 벡터를 초기화하는 방법 (0) | 2020.05.13 |
|---|---|
| CSS에서“! important”를 사용하면 어떤 의미가 있습니까? (0) | 2020.05.13 |
| .append (), prepend (), .after () 및 .before () (0) | 2020.05.12 |
| Git 저장소에서 모든 태그 삭제 (0) | 2020.05.12 |
| iPhone / iOS에서 전화 번호의 파란색 스타일을 어떻게 제거합니까? (0) | 2020.05.12 |