Share
Veel websites bieden syndicatie-indelingen zoals RSS, JSON of op XML gebaseerde services om eenvoudige levering van inhoud mogelijk te maken. Maar wat gebeurt er wanneer een website geen van deze diensten aanbiedt? Hoe syndicaat je content van een website die geen nieuwsfeed aanbiedt? Dit is wat ik wilde oplossen.
Ik heb onlangs een project ontvangen van een klant met een overzicht en een korte beschrijving van de website en de doelstellingen die ze willen bereiken. Naast deze brief waren er aantekeningen die aangaven dat ze een onroerendgoedmaatschappij waren en regelmatig onroerend goed naar een bekende vastgoedwebsite hebben gepost en hun inhoud op deze externe site op hun eigen website konden syndiceren zonder beide sites te hoeven updaten. De vangst: deze bekende vastgoedsite bood geen syndicatieservice of API aan voor ontwikkelaars om toegang te krijgen tot hun aanbiedingen.
Nadat ik het internet had doorzocht, ontdekte ik dat de meeste oplossingen voor dit probleem onelegant waren en meestal browser-specifiek of ineffectief waren. Ik besloot mijn eigen oplossing te coderen met behulp van de populaire javascript-bibliotheek JQuery.
Om toegang te krijgen tot informatie van een andere website moest ik de AJAX-functies van de JQuery-bibliotheek gebruiken.
Als u bekend bent met JQuery, moet het bovenstaande niet al te moeilijk te begrijpen zijn. We gebruiken de AJAX-laadfunctie om de inhoud van een webpagina te laden in een element met id #content. De oplossing leek te gemakkelijk, maar helaas, zoals je snel zult merken, is dat de code alleen in Internet Explorer 6 of 7 zal werken. De reden hiervoor werd al snel duidelijk - alle andere browsers blokkeren het laden van websites van alternatieve domeinen vanwege lokale beveiligingsinstellingen. Dit betekende dat we alleen relatieve pagina's kunnen laden, niet absolute URL's.
Ik heb online rondgekeken naar een oplossing voor dit probleem en tot mijn ontzetting hadden de meeste mensen de indruk dat het niet mogelijk was om de lokale beveiligingsinstellingen van de meeste browsers te omzeilen of het was een te ingewikkelde taak dus niet de moeite waard om te doen. Dit is het moment waarop ik de cURL-bibliotheek ontdekte.
cURL is best nuttig omdat het u in staat stelt om te communiceren met andere servers met behulp van URL's en standaard webprotocollen zoals HTTP, HTTPS of SSL. Met behulp van cURL kon ik een bypass bouwen naar ons lokale beveiligingsprobleem door het laden van de hele website naar een lokale URL-server te gebruiken.
Deze code initieert een cURL-object van een externe URL - het voordeel is dat de URL op de server wordt geladen in plaats van op de client. De serverbeveiligingsinstellingen in de PHP-omgeving zijn veel flexibeler dan de lokale beveiligingsinstellingen van de meeste moderne browsers. Nadat het cURL-object is gestart, wordt de volledige inhoud van de URL afgedrukt. Als we dit document nu opslaan als 'curl.php' op onze webserver, hebben we nu een lokaal bestand dat wordt geladen in de volledige inhoud van de website van onze externe URL.
Laten we teruggaan naar onze originele code en onze wijzigingen aanbrengen:
Ons script ondersteunt nu alle browsers en wordt niet bereikt met behulp van onorthodoxe lokale beveiligingshacks.
Nu kunt u zich afvragen wat de voordelen zijn van het werken met dit document in JQuery in vergelijking met het eenvoudig manipuleren van ons document met behulp van PHP? De belangrijkste reden voor mijn keuze om JQuery te gebruiken, is de mogelijkheid om de CSS-gestileerde selectors te gebruiken om te kiezen welke inhoud op onze pagina we eigenlijk willen syndiceren, zoals het volgende:
In plaats van het hele document in te laden, laden we nu gewoon de inhoud van een element in met id #content. We zullen later in het artikel tot de voordelen hiervan komen.
Als je dit een tijdje hebt gespeeld, merk je misschien het volgende grote probleem. Hoewel we erin geslaagd zijn om inhoud van een externe site te syndiceren, werken alle relatieve links en afbeeldingen niet meer. Een andere reden om in JQuery te werken. Met de functie JQuery each () kunnen we een lus maken die door alles heen gaat en elementen die het huidige HREF- of SRC-kenmerk vastgrijpen en het externe domein daarop plaatsen.
Nu is het probleem op dit punt waar we tegenaan lopen, waar integreren we onze nieuwe code in onze bestaande code? Het probleem dat ik oorspronkelijk tegenkwam, was waar je het ook plaatste. De externe markup laadde niet snel genoeg voor onze code om het domein te veranderen om na het feit van kracht te worden. De oplossing bestaat uit het combineren van de twee tot een vrij elegante JQuery-oplossing.
Accentsconagua
$ ("document"). ready (function () $ ("# content"). load ("curl.php #content", , function () $ ("a"). each (functie (i ) Var href = $ (this) .attr ('href'); var new_href = domain + href; $ (this) .attr ('href', new_href););
$ ("img"). each (functie (i) var src = $ (this) .attr ('src'); var new_src = domain + src; $ (this) .attr ('src', new_src); ); ); ); De laadfunctie heeft nog twee eigenschappen die het kan hebben, waarvan één variabelen zijn die u naar uw externe URL wilt verzenden. U zou bijvoorbeeld kunnen proberen gegevens op te halen uit de resultaten van een POST-formulier. De andere eigenschap is een callback-functie of wat te doen zodra de functie load () is voltooid. In ons geval is dit perfect - we plaatsen onze code in de callback-functie die voorkomt dat deze wordt uitgevoerd totdat we volledig op onze externe pagina laden.
Zoals u nu ziet, kunnen we nu eenvoudig elk element van onze pagina-inhoud van een andere website bekijken. Dit is erg praktisch
voor het niet alleen syndiceren van inhoud zoals nieuwsfeeds, maar elke dynamisch bijgewerkte inhoud.
Nu we onze inhoud hebben kunnen ophalen, toont de volgende stap de superioriteit in het gebruik van deze code boven bijvoorbeeld