jQueryを使用してRSSフィードを解析したいと思います。これは、すぐに使用できるベースjQueryライブラリで実行できますか、それともプラグインを使用する必要がありますか？
質問する
222853 次
20 に答える
208
警告
Google Feed 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);
}
});
}
于 2011-06-07T21:34:48.400 に答える
185
jFeed（jQuery RSS / Atomプラグイン）を使用します。ドキュメントによると、それは次のように簡単です：
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});
于 2008-10-22T16:56:27.037 に答える
160
議論に遅れて来た私たちのために、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...
});
});
于 2011-08-15T16:18:05.067 に答える
16
jFeedはIEでは機能しません。
zRSSFeedを使用します。5分で動作しました
于 2010-06-12T20:21:47.643 に答える
16
更新 (2019 年 10 月 15 日)
jquery-rss から、フェッチ API を使用し、追加の依存関係なしで動作するVanilla RSSという新しいライブラリにコア ロジックを抽出しました。
const RSS = require('vanilla-rss');
const rss = new RSS(
document.querySelector("#your-div"),
"http://www.recruiter.com/feed/career.xml",
{
// options go here
}
);
rss.render().then(() => {
console.log('Everything is loaded and rendered');
});
オリジナル
役職：
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/sdepold/ozq2dn9e/1/を参照してください。
于 2011-10-26T12:11:11.947 に答える
15
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>
于 2008-10-22T17:43:11.747 に答える
9
RSS データがプライベートでない限り、Google AJAX Feed API を使用してください。もちろん速いです。
于 2008-10-22T17:14:42.663 に答える
8
更新[ 2016 年 4 月 25 日] GitHub.jQRSSでホストされるより多くのオプションと機能を備えた、より適切に記述され、完全にサポートされたバージョンになりました
Nathan StrutzによるSelected Answerを見ましたが、jQuery プラグイン ページのリンクがまだダウンしており、そのサイトのホームページが読み込まれていないようです。他のいくつかのソリューションを試してみたところ、それらのほとんどが時代遅れであるだけでなく、簡単であることがわかりました。したがって、私はそこに脱帽して独自のプラグインを作成しました。ここにデッドリンクがあるため、ここは回答を送信するのに最適な場所のようです. 2012 年 (まもなく 2013 年まで) にこの回答を探している場合は、私が行ったように、リンク切れや古いアドバイスの不満に気付くかもしれません。以下は、最新のプラグインの例とプラグインのコードへのリンクです! コードを JS ファイルにコピーして、他のプラグインと同様にヘッダーにリンクするだけです。使用は非常にEZです！
jsフィドル
プラグイン コード2015 年 2 月 9 日 -コマンドを送信する前
に確認するために、長い間延期されていた更新を行いました。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('Search Words Here instead of a Link', 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.
*/
}
于 2012-12-07T22:18:13.490 に答える
5
@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>
于 2011-09-13T19:59:40.100 に答える
5
(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>
于 2012-02-17T12:26:02.170 に答える
4
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>
于 2010-06-10T07:01:27.313 に答える
2
フィードにyqlでjqueryを使用しています。yql を使用して、twitter、rss、buzz を取得できます。http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/から読みました。それは私にとって非常に便利です。
于 2010-04-13T06:55:49.427 に答える
2
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'
});
于 2015-12-11T23:02:39.993 に答える
1
<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>
于 2010-02-26T21:40:38.350 に答える
0
zRSSfeedはjQuery上に構築されており、シンプルなテーマは素晴らしいです。
試してみる。
于 2011-09-21T01:37:46.747 に答える
0
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>
于 2012-10-08T20:27:19.167 に答える
-1
jQuery Feedsは優れたオプションであり、テンプレートシステムが組み込まれており、Google Feed APIを使用しているため、クロスドメインをサポートしています。
于 2012-07-13T02:33:06.497 に答える
-1
Superfeedrには、それを非常にうまく行うjquery プラグインがあります。Cross Origin Policy の問題は発生せず、更新はリアルタイムで伝達されます。
于 2014-01-23T20:21:43.710 に答える
-2
jFeed は簡単で、テストするための例があります。ただし、別のサーバーからのフィードを解析する場合は、フィードのサーバーでCross Origin Resource Sharing (CORS)を許可する必要があります。ブラウザのサポートも確認する必要があります。
サンプルをアップロードしましたが、例の URL を http プロトコル経由で 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
于 2012-05-11T03:36:58.920 に答える