Das Einbetten von RSS-Feeds erfordert JavaScript in Kombination mit einem Proxy-Dienst, da Browser durch CORS eingeschr?nkt sind und keine dom?nenübergreifenden XML-Daten direkt abrufen k?nnen. 1. Verwenden Sie Proxys wie allorigins.win oder rss2json.com, um CORS zu umgehen; 2. Verwenden Sie fetch(), um RSS-URLs anzufordern und Antworten zu erhalten. 3. Verwenden Sie DOMParser, um XML zu analysieren oder Daten im JSON-Format direkt zu verarbeiten. 4. Informationen wie Titel, Links, Daten und Beschreibungen extrahieren; 5. HTML dynamisch generieren und Seitenelemente einfügen; 6. Fügen Sie optional CSS-Versch?nerungsstile hinzu. 7. Achten Sie darauf, die Anforderungsh?ufigkeit zu begrenzen, Fehler zu behandeln und serverseitiges Caching in Betracht zu ziehen, um die Zuverl?ssigkeit zu verbessern. Schlie?lich wird JavaScript verwendet, um das Anzeigeformular vollst?ndig zu steuern, eine automatische Inhaltsaktualisierung zu realisieren und muss sich auf den Zwischen-Proxy-Dienst verlassen, um die Datenerfassung abzuschlie?en. Der gesamte Prozess ist vollst?ndig und durchführbar und endet auf sichere Weise.

Das Einbetten eines RSS-Feeds in Ihre Website mithilfe von JavaScript ist eine hervorragende M?glichkeit, automatisch aktualisierte Inhalte – wie Blogbeitr?ge oder Nachrichtenartikel – aus einer externen Quelle anzuzeigen. Da Browser RSS (das auf XML basiert) nicht direkt lesen k?nnen, müssen Sie den Feed abrufen, das XML analysieren und es mithilfe von JavaScript in HTML konvertieren . Hier erfahren Sie Schritt für Schritt, wie es geht.

? Warum JavaScript für RSS-Feeds verwenden?

RSS-Feeds sind XML-Dokumente und die meisten Websites unterstützen die direkte Einbettung von XML-Inhalten nicht. Mit JavaScript k?nnen Sie:

• Rufen Sie den RSS-Feed von einem Remote-Server ab.
• Analysieren Sie die XML-Daten.
• Extrahieren Sie Titel, Links, Beschreibungen und Ver?ffentlichungsdaten.
• Zeigen Sie sie übersichtlich auf Ihrer Website an.

?? Hinweis: Aufgrund von CORS-Einschr?nkungen (Cross-Origin Resource Sharing) k?nnen Sie RSS-Feeds normalerweise nicht direkt von einer anderen Domain abrufen, es sei denn, dieser Server l?sst dies zu. Um dies zu umgehen, ben?tigen Sie einen Proxy-Dienst oder eine serverlose Funktion.

?? Schritt 1: Verwenden Sie einen Proxy, um den RSS-Feed abzurufen

Aufgrund von CORS k?nnen Sie einen RSS-Feed wie https://example.com/feed.xml nicht direkt aus clientseitigem JavaScript abrufen, wenn diese Dom?ne keine ursprungsübergreifenden Anforderungen zul?sst.

L?sung: Verwenden Sie einen kostenlosen CORS-Proxy oder einen Feed-to-JSON-Dienst.

Beliebte Optionen:

• https://api.allorigins.win/get
• http://ipnx.cn/link/93ec3bccd20f1403374ea7636b10f56d (konvertiert RSS über API in JSON)
• https://thingproxy.freeboard.io/fetch

? In diesem Beispiel verwenden wir allorigins.win .

? Schritt 2: Schreiben Sie JavaScript, um den Feed abzurufen und zu analysieren

Hier ist ein funktionierendes Beispiel mit fetch() und dem AllOrigins-Proxy:

 <div id="rss-feed"></div>

<Skript>
  const rssFeedContainer = document.getElementById("rss-feed");
  const rssUrl = "https://yourwebsite.com/feed"; // Durch Ihre RSS-Feed-URL ersetzen
  const ProxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(rssUrl)}`;

  fetch(proxyUrl)
    .then(response => Response.json())
    .then(data => {
      const parser = new DOMParser();
      const rss = parser.parseFromString(data.contents, "text/xml");
      const items = rss.querySelectorAll("item");

      let html = "<ul>";
      items.forEach(item => {
        const title = item.querySelector("title").textContent;
        const link = item.querySelector("link").textContent;
        const pubDate = item.querySelector("pubDate") ? neues Datum(item.querySelector("pubDate").textContent) : null;
        const description = item.querySelector("description")?.textContent || ?“;

        html = `
          <li>
            <h4><a href="${link}" target="_blank">${title}</a></h4>
            ${pubDate ? `<small>${pubDate.toLocaleDateString()}</small>` : ""}
            <p>${description.substring(0, 150)}...</p>
          </li>
        `;
      });
      html = "</ul>";
      rssFeedContainer.innerHTML = html;
    })
    .catch(err => {
      rssFeedContainer.innerHTML = "<p>RSS-Feed konnte nicht geladen werden.</p>";
      console.error("RSS-Abruffehler:", err);
    });
</script>

?Wie es funktioniert

1. Proxy-Anfrage : Die RSS-URL wird über AllOrigins weitergeleitet, um CORS zu umgehen.
2. XML-Analyse : DOMParser konvertiert die XML-Zeichenfolge in ein DOM-Objekt.
3. Daten extrahieren : Verwendet querySelector , um <title> , <link> , <pubDate> usw. abzurufen.
4. HTML generieren : Erstellt eine Liste von Beitr?gen und fügt sie in die Seite ein.

? Optional: Gestalten Sie den Feed

Fügen Sie etwas CSS hinzu, damit es besser aussieht:

 #rss-feedul {
  Listenstil: keiner;
  Polsterung: 0;
}

#rss-feed li {
  Rand unten: 20px;
  border-bottom: 1px solid #eee;
  Polsterung unten: 15px;
}

#rss-feed h4 {
  Rand: 0 0 5px 0;
}

#RSS-Feed ein {
  Textdekoration: keine;
  Farbe: #1a73e8;
}

#rss-feed klein {
  Farbe: #666;
}

#rss-feed p {
  Farbe: #444;
  Schriftgr??e: 0,9em;
}

?? Einschr?nkungen und Problemumgehungen

• Ratenbegrenzung : Kostenlose Proxys wie AllOrigins k?nnen Anfragen einschr?nken. Vermeiden Sie überm??iges Nachladen.
• Zuverl?ssigkeit : Kostenlose Dienste k?nnen ausfallen. Berücksichtigen Sie für die Produktion Folgendes:
  • Ein Backend-Proxy (Node.js, PHP usw.)
  • Verwendung der rss2json.com-API (kostenloses Kontingent verfügbar)
  • Hosten Sie Ihren eigenen Feed-Abruf-Endpunkt

Beispiel mit rss2json (zuverl?ssiger):

 fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`)
  .then(res => res.json())
  .then(data => {
    if (data.status === "ok") {
      const html = data.items.slice(0, 5).map(item => `
        <div>
          <h4><a href="${item.link}" target="_blank">${item.title}</a></h4>
          <small>${new Date(item.pubDate).toLocaleDateString()}</small>
          <p>${item.description.substring(0, 120)}...</p>
        </div>
      `).join(&#39;&#39;);
      rssFeedContainer.innerHTML = html;
    }
  });

?Abschlie?ende Tipps

• Bereinigen Sie die Ausgabe immer, wenn Beschreibungen angezeigt werden (um XSS zu verhindern).
• Begrenzen Sie die Anzahl der angezeigten Elemente (z. B. 5–10).
• Testen Sie mit verschiedenen RSS-Feeds – einige formatieren XML etwas anders.
• Erw?gen Sie, den Feed auf Ihrem Server zwischenzuspeichern, um die Ladezeiten zu verkürzen und das Erreichen von Limits zu vermeiden.

Im Grunde ist es nicht schwer, wenn Sie einen Proxy oder JSON-Konverter verwenden. Mit JavaScript haben Sie die volle Kontrolle darüber, wie der Feed auf Ihrer Website aussieht und sich verh?lt. Denken Sie daran: Kein direkter RSS-Abruf im Browser – immer über einen Mittelsmann .

Das obige ist der detaillierte Inhalt vonSo betten Sie einen RSS-Feed mit JavaScript in eine Website ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!