Share
Viele Websites bieten Syndication-Formate wie RSS-, JSON- oder XML-basierte Dienste an, um die Bereitstellung von Inhalten zu erleichtern. Was passiert aber, wenn eine Website keinen dieser Dienste anbietet? Wie stellen Sie Inhalte von einer Website zusammen, die keinen News-Feed bietet? Das habe ich mir vorgenommen, um es zu lösen.
Ich habe kürzlich ein Projekt von einem Kunden erhalten, in dem die Website und die Ziele, die sie erreichen möchten, kurz beschrieben werden. Zusammen mit dieser Kurzbeschreibung wurden Notizen angegeben, die darauf hinweisen, dass es sich um eine Immobiliengesellschaft handelt, die regelmäßig Immobilien auf einer bekannten Immobilienwebsite veröffentlicht und ihre Inhalte auf dieser externen Website auf ihrer eigenen Website zusammenfassen möchte, ohne beide Websites aktualisieren zu müssen. Der Haken: Diese bekannte Immobilienseite bot keinen Syndikationsservice oder keine API für Entwickler, um auf ihre Einträge zuzugreifen.
Nachdem ich das Internet durchsucht hatte, stellte ich fest, dass die meisten Lösungen für dieses Problem inelegant waren und meistens browserspezifisch oder ineffektiv waren. Ich entschied mich dafür, meine eigene Lösung mit der beliebten Javascript-Bibliothek JQuery zu codieren.
Um auf Informationen von einer anderen Website zugreifen zu können, musste ich die AJAX-Funktionen der JQuery-Bibliothek verwenden.
Wenn Sie mit JQuery vertraut sind, sollte das Obige nicht zu schwer zu verstehen sein. Wir verwenden die AJAX-Ladefunktion, um den Inhalt einer Webseite in ein Element mit der ID #content zu laden. Die Lösung schien zu einfach, aber das Problem, wie Sie bald feststellen werden, ist, dass der Code nur in Internet Explorer 6 oder 7 funktioniert. Der Grund dafür wurde schnell ersichtlich - alle anderen Browser blockieren das Laden von Websites aus alternativen Domänen aufgrund lokaler Sicherheitseinstellungen. Dies bedeutet, dass wir nur relative Seiten und keine absoluten URLs laden können.
Ich habe mich online nach einer Lösung für dieses Problem umgeschaut, und zu meinem Entsetzen waren die meisten Leute der Meinung, dass es nicht möglich sei, die lokalen Sicherheitseinstellungen der meisten Browser zu umgehen, oder es war eine zu komplizierte Aufgabe, die sich nicht lohnt. Zu diesem Zeitpunkt entdeckte ich die cURL-Bibliothek.
cURL ist insofern sehr nützlich, als Sie mit anderen Servern über URLs und Standard-Webprotokolle wie HTTP, HTTPS oder SSL kommunizieren können. Mit cURL konnte ich einen Bypass für unser lokales Sicherheitsproblem erstellen, indem ich die gesamte Website auf eine lokale URL-Serverseite lade.
Dieser Code initiiert das cURL-Objekt von einer externen URL. Der Vorteil ist, dass die URL auf den Server und nicht auf den Client geladen wird. Die Server-Sicherheitseinstellungen in der PHP-Umgebung sind wesentlich flexibler als die lokalen Sicherheitseinstellungen der meisten modernen Browser. Nach dem Initiieren des cURL-Objekts drucken wir einfach den gesamten Inhalt der URL. Wenn wir dieses Dokument jetzt als 'curl.php' auf unserem Webserver speichern, haben wir jetzt eine lokale Datei, die den gesamten Inhalt der Website unserer externen URL lädt.
Gehen wir zurück zu unserem ursprünglichen Code und fügen Sie unsere Modifikationen ein:
Unser Skript unterstützt jetzt alle Browser und wird nicht mit unorthodoxen lokalen Sicherheits-Hacks ausgeführt.
Nun fragen Sie sich vielleicht, welche Vorteile es hat, wenn Sie mit diesem Dokument in JQuery arbeiten, als wenn Sie unser Dokument nur mit PHP bearbeiten. Der Hauptgrund für meine Wahl bei der Verwendung von JQuery ist die Möglichkeit, mithilfe der im CSS-Stil gestalteten Selektoren auszuwählen, welche Inhalte auf unserer Seite tatsächlich zusammengestellt werden sollen.
Anstatt das gesamte Dokument zu laden, laden wir jetzt einfach den Inhalt eines Elements mit der ID #content. Wir werden später in dem Artikel auf die Vorteile davon eingehen.
Nachdem Sie damit ein bisschen herumgespielt haben, bemerken Sie möglicherweise das nächste große Problem. Obwohl es uns gelungen ist, den Inhalt externer Websites zu syndizieren, funktionieren alle relativen Links und Bilder nicht mehr. Ein weiterer Grund für die Arbeit in JQuery. Mit der JQuery-Funktion each () können Sie eine Schleife erstellen, die alle durchläuft und Elemente, die das aktuelle HREF- oder SRC-Attribut übernehmen und die externe Domäne diesem voranstellen.
Nun besteht das Problem an diesem Punkt darin, wo wir unseren neuen Code in unseren vorhandenen Code integrieren. Das Problem, auf das ich ursprünglich gestoßen bin, war, egal wo Sie es formulieren, das externe Markup wurde nicht schnell genug geladen, damit unser Code die Domäne ändern konnte, um nach der Tatsache in Kraft zu treten. Die Lösung beinhaltet die Kombination der beiden zu einer eleganten JQuery-Lösung.
Accentsconagua
$ ("document"). ready (function () $ ("# content"). load ("curl.php #content", , function () $ ("a"). each (function (i ) Var href = $ (this) .attr ('href'); var new_href = domain + href; $ (this) .attr ('href', new_href););
$ ("img"). each (Funktion (i) var src = $ (this) .attr ('src'); var new_src = Domäne + src; $ (this) .attr ('src', new_src); ); ); ); Die Ladefunktion verfügt über zwei weitere Eigenschaften, eine davon sind Variablen, die Sie an Ihre externe URL übergeben möchten. Beispielsweise könnten Sie versuchen, Daten aus den Ergebnissen eines POST-Formulars abzurufen. Die andere Eigenschaft ist eine Rückruffunktion oder was zu tun ist, wenn die load () - Funktion abgeschlossen ist. In unserem Fall ist das perfekt - wir fügen unseren Code in die Callback-Funktion ein, die verhindert, dass er ausgeführt wird, bis wir ihn vollständig auf unserer externen Seite laden.
Wie Sie jetzt sehen, können wir jetzt einfach Elemente in den Seiteninhalt einer anderen Website ziehen. Das ist sehr praktisch
nicht nur für das Zusammenführen von Inhalten wie News-Feeds, sondern auch für dynamisch aktualisierte Inhalte.
Nun, da wir unseren Inhalt einfließen lassen können, zeigt der nächste Schritt die Überlegenheit bei der Verwendung dieses Codes gegenüber say a