Share
Många webbplatser erbjuder syndikeringsformat som RSS, JSON eller XML-baserade tjänster för att möjliggöra enkel leverans av innehåll. Men vad händer när en webbplats inte erbjuder någon av dessa tjänster? Hur syndikerar du innehållet från en webbplats som inte erbjuder ett nyhetsflöde? Detta är vad jag bestämde mig för att lösa.
Jag har nyligen fått ett projekt från en klient med en skiss och en kort beskrivning av webbplatsen och de mål de vill uppnå. Tillsammans med denna kort var anteckningar som indikerar att de var ett fastighetsbolag och skickade regelbundet fastigheter till en välkänd fastighetswebbplats och ville kunna syndikera innehållet på denna externa webbplats på sin egen webbplats utan att behöva uppdatera båda sidorna. Fångst: Den här kända fastighetssidan erbjöd inte en syndikeringstjänst eller API för utvecklare att komma åt sina listor.
Efter att ha skurit på internet upptäckte jag att de flesta lösningar på detta problem var ineleganta och de flesta av dem var webbläsarspecifika eller ineffektiva. Jag bestämde mig för att koda min egen lösning med det populära javascriptbiblioteket JQuery.
För att komma åt information från en annan webbplats behövde jag använda AJAX-funktionerna i JQuery-biblioteket.
Om du är bekant med JQuery bör ovanstående inte vara för svårt att förstå. Vi använder AJAX-belastningsfunktionen för att ladda en webbsida innehåll till ett element med id #content. Lösningen verkade för lätt, men tyvärr problemet, som du snart kommer inse, är att koden bara fungerar i Internet Explorer 6 eller 7. Orsaken till detta blev snart uppenbar - alla andra webbläsare blockerar inläsningen av webbplatser från alternativa domäner på grund av lokala säkerhetsinställningar. Detta innebar att vi bara kan läsa in relativa sidor, inte absoluta webbadresser.
Jag tittade på nätet för att lösa problemet och till min skräck var de flesta antingen intryckta att det inte gick att kringgå de flesta webbläsares lokala säkerhetsinställningar eller det var för komplicerat en uppgift så inte värt att göra. Det här är när jag upptäckte cURL-biblioteket.
cURL är ganska användbar genom att det låter dig kommunicera med andra servrar med webbadresser och standardwebprotokoll som HTTP, HTTPS eller SSL. Med hjälp av cURL kunde jag bygga en bypass till vårt lokala säkerhetsproblem genom att ladda in hela webbplatsen till en lokal URL-server-sida.
Den här koden initierar cURL-objekt från en extern webbadress. Fördelen att webbadressen är laddad på servern istället för på klienten. Serverens säkerhetsinställningar i PHP-miljön är mycket mer flexibla än de lokala säkerhetsinställningarna för de flesta moderna webbläsare. Efter att ha initierat cURL-objektet skriver vi helt enkelt hela innehållet i webbadressen. Om vi nu sparar detta dokument som "curl.php" på vår webbserver har vi nu en lokal fil som laddas i hela webbplatsens innehåll på vår externa URL.
Låt oss gå tillbaka till vår ursprungliga kod och lägga in våra ändringar:
Vårt skript stöder nu alla webbläsare och uppnås inte med hjälp av några oortodoxa lokala säkerhetshackar.
Nu kanske du undrar vilka fördelar med att arbeta med det här dokumentet i JQuery jämfört med att bara manipulera vårt dokument med PHP? Den främsta orsaken till mitt val när jag använder JQuery är möjligheten att använda sina CSS-styled selectors för att välja vilket innehåll på vår sida vi faktiskt vill syndikera, som följande:
I stället för att ladda in hela dokumentet laddar vi nu bara in innehållet i ett element med id #content. Vi kommer att få fördelarna med detta senare i artikeln.
Efter att ha spelat med det här lite kan du märka nästa stora problem. Även om vi har lyckats syndikera innehållet på externa webbplatser, fungerar alla relativa länkar och bilder inte längre. En annan anledning till att arbeta i JQuery. Med funktionen JQuery varje () kan vi skapa en slinga som går igenom alla och element som tar tag i nuvarande HREF- eller SRC-attribut och lägger ut den externa domänen på den.
Nu är problemet på den här tiden vi stöter på, var var integrerar vi vår nya kod i vår befintliga kod? Problemet som jag ursprungligen kom över var oavsett var du säger det, den externa märkningen laddades inte tillräckligt snabbt för att vår kod skulle ändra domänen för att träda i kraft efter det faktum. Lösningen innebär att de två kombineras med en ganska elegant JQuery-lösning.
Accentsconagua
$ ("dokument"). redo (funktion () $ ("# innehåll"). last ("curl.php #content", , funktion () $ ("a"). ) Var href = $ (detta) .attr ('href'); var new_href = domän + href; $ (detta) .attr ('href', new_href););
$ ("img"). Varje (funktion (i) var src = $ (detta) .attr ('src'); var new_src = domän + src; $ (detta) .attr ('src', new_src); ); ); ); Lastfunktionen har ytterligare två egenskaper som den kan ta, en är variabler som du vill skicka till din externa webbadress. Till exempel kan du försöka hämta data från resultatet av ett POST-formulär. Den andra egenskapen är en återuppringningsfunktion eller vad som ska göras när funktionen load () har slutförts. I vårt fall är detta perfekt - vi placerar vår kod i återuppringningsfunktionen som förhindrar att den körs tills vi laddar in helt på vår externa sida.
Som du kan se nu kan vi helt enkelt dra in något element på vårt sidinnehåll från en annan webbplats. Detta är mycket praktiskt
för att inte bara syndikera innehåll som nyhetsflöden utan alla dynamiskt uppdaterade innehåll.
Nu när vi kan ha dragit in i vårt innehåll visar nästa steg överlägsenheten i att använda den här koden över säger an