小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQueryでRSSを読み込んで表示

  • 公開日：2020-03-28
  • 最終更新日：2020-10-15

wordpress（ワードプレス）の投稿記事を別サイト（同一ドメイン）で読み込みで表示したという相談があった際にjQueryのみで実装した方法をメモ。

HTML

<ul id="feedList"></ul>

jQuery

$(function(){
	$.ajax({
		url: 'rssのURL',
		cache: false,
		dataType:"xml",
		success: function(xml){
			$(xml).find('item').each(function(){
				var title = $(this).find('title').text();
				var url = $(this).find('link').attr('href');
				$('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList');
			});
		}
	});
});

外部ドメイン（クロスドメイン）のRSSを読み込む場合

外部ドメインのRSSを読み込む際は、セキュリティの関係で ajax では同一ドメインのファイルとしか通信できない制限があるため、別でPHPファイルを用いて実装が必要。

rss.php（PHP）

$url = 'rssのURL';
$xml = file_get_contents($url);
header('Content-type: application/xml; charset=UTF-8');
print $xml;

上記の内容で作成したファイルを、jqueryの「url」の値として読み込みます
例では『rss.php』としてます。

jQuery

$(function(){
	$.ajax({
		url: 'rss.php',
		cache: false,
		dataType:"xml",
		success: function(xml){
			$(xml).find('item').each(function(){
				var title = $(this).find('title').text();
				var url = $(this).find('link').attr('href');
				$('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList');
			});
		}
	});
});