Saya perlu mengurai RSS feed (XML versi 2.0) dan menampilkan detail parsing di halaman HTML.
javascript
html
rss
Thiru
sumber
sumber
Jawaban:
Parsing Feed
Dengan jQuery 's jFeed
(Jangan terlalu merekomendasikan yang itu, lihat opsi lainnya.)
Dengan Dukungan XML Built-in jQuery
Dengan jQuery dan Google AJAX Feed API
Tetapi itu berarti Anda mengandalkan mereka untuk online dan dapat dihubungi.
Membangun Konten
Setelah Anda berhasil mengekstrak informasi yang Anda butuhkan dari feed, Anda dapat membuat
DocumentFragment
s (dengandocument.createDocumentFragment()
berisi elemen (dibuat dengandocument.createElement()
) yang ingin Anda masukkan untuk menampilkan data Anda.Menyuntikkan konten
Pilih elemen kontainer yang Anda inginkan pada halaman dan tambahkan fragmen dokumen Anda ke dalamnya, dan cukup gunakan innerHTML untuk mengganti kontennya sepenuhnya.
Sesuatu seperti:
atau:
Uji Data
Menggunakan feed pertanyaan ini , yang pada tulisan ini memberikan:
Eksekusi
Menggunakan Dukungan XML Built-in jQuery
Memohon:
Cetakan:
Menggunakan jQuery dan Google AJAX API
Memohon:
Cetakan:
sumber
Opsi lain yang tidak digunakan lagi (berkat @daylight) , dan yang paling mudah bagi saya (inilah yang saya gunakan untuk SpokenToday.info ):
The Google API Pakan tanpa menggunakan JQuery dan dengan hanya 2 langkah:
Impor perpustakaan:
Temukan / Muat feed ( dokumentasi ):
Untuk mengurai data, periksa dokumentasi tentang format respons .
sumber
document.getElementById('image').style.backgroundImage = "url('" + src + "')";
Jika Anda mencari alternatif sederhana dan gratis untuk Google Feed API untuk widget rss Anda, rss2json.com bisa menjadi solusi yang cocok untuk itu.
Anda dapat mencoba melihat cara kerjanya pada kode sampel dari dokumentasi api di bawah ini:
sumber
Bagi orang lain yang membaca ini (pada 2019 dan seterusnya) sayangnya sebagian besar implementasi membaca RSS JS sekarang tidak berfungsi. Pertama, Google API telah ditutup, jadi ini bukan lagi opsi dan karena kebijakan keamanan CORS, Anda biasanya tidak dapat meminta umpan RSS lintas domain sekarang.
Menggunakan contoh di https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) saya mendapatkan yang berikut:
Access to XMLHttpRequest at 'https://feeds.feedburner.com/raymondcamdensblog?format=xml' from origin 'MYSITE' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Ini benar dan merupakan tindakan pencegahan keamanan oleh situs web akhir tetapi sekarang berarti bahwa jawaban di atas tidak mungkin berfungsi.
Solusi saya mungkin akan mengurai umpan RSS melalui PHP dan mengizinkan javascript untuk mengakses PHP saya daripada mencoba mengakses umpan tujuan akhir itu sendiri.
sumber
Jika Anda ingin menggunakan API javascript biasa, ada contoh yang bagus di https://github.com/hongkiat/js-rss-reader/
Deskripsi lengkapnya di https://www.hongkiat.com/blog/rss-reader-in-javascript/
Ini menggunakan
fetch
metode sebagai metode global yang mengambil sumber daya secara asinkron. Di bawah ini adalah cuplikan kode:sumber
Anda dapat menggunakan jquery-rss atau Vanilla RSS , yang dilengkapi dengan template yang bagus dan sangat mudah digunakan:
Lihat http://jsfiddle.net/sdepold/ozq2dn9e/1/ untuk contoh yang berfungsi.
sumber
Mencoba menemukan solusi yang baik untuk ini sekarang, saya kebetulan menggunakan FeedEk jQuery RSS / ATOM Feed Plugin yang melakukan pekerjaan yang baik dalam mem -parse dan menampilkan RSS dan Atom feed melalui jQuery Feed API . Untuk umpan RSS berbasis XML dasar, menurut saya ini berfungsi seperti pesona dan tidak memerlukan skrip sisi server atau solusi CORS lainnya untuk menjalankannya bahkan secara lokal.
sumber
Saya sangat jengkel dengan banyak artikel dan jawaban yang menyesatkan sehingga saya menulis pembaca RSS saya sendiri: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- untuk-membuat-a-rss-reader-in-javascript /
Anda dapat menggunakan permintaan AJAX untuk mengambil file RSS tetapi ini akan berfungsi jika dan hanya jika Anda menggunakan proxy CORS. Saya akan mencoba menulis proxy CORS saya sendiri untuk memberi Anda solusi yang lebih kuat. Sementara itu, ini berfungsi, saya menerapkannya di server saya di bawah Debian Linux.
Solusi saya tidak menggunakan JQuery, saya hanya menggunakan API standar Javascript biasa tanpa perpustakaan pihak ketiga dan seharusnya berfungsi bahkan dengan Microsoft Internet Explorer 11.
sumber