クリエイター：コーディング備忘録ブログ

RSS

コーディング

jqueryのみでrssを読み込み

2018.09.18

Google Feed APIが終了したとのことで

Google Feed APIの代替策としてjqueryを使用したrssの収得方法です。

以下のコードでは同じドメイン内の RSS を読み込んで表示することが可能です。

<script type= "text/javascript">
$(function(){
  $.ajax({
    url: "http://xxx/?feed=rss2",
    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');
        });
    }
  });
});
</script>

<ul id="feed"></ul>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<script type= "text/javascript">

$(function(){

$.ajax({

url: "http://xxx/?feed=rss2",

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');

});

}

});

});

</script>

<ul id="feed"></ul>

jqueryのみで簡単にrssを取得可能なので、ブログの最新記事などをhtmlサイトに表示させたいときなどに便利ですね。

この記事を見た人は次の記事も見ています。

デバイスサイズなどでjsの条件分岐

前の記事

font-feature-settingsで文字詰め

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

タクソノミーページで一番下の子孫要素を取得する方法

2018.11.30

コーディング

第四十九回「初心者から始めるSEO対策」

2016.07.11

コーディング

システムである条件の時だけ表示される要素に紐づけして表示させる

2017.03.31

コーディング

iosでth、tdが立て並びにならない場合

2018.11.02

コーディング

第三十一回「WP Social Bookmarking Lightで外部発信」

2016.05.24

コーディング

position:stick

2017.08.31