小金井にあるWEB制作会社の備忘録
MEMORANDUMjQueryで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');
});
}
});
});