Share
Molti siti Web offrono formati di syndication come servizi basati su RSS, JSON o XML per consentire una facile consegna dei contenuti. Ma cosa succede quando un sito web non offre uno di questi servizi? Come distribuisci contenuti da un sito web che non offre un feed di notizie? Questo è quello che ho deciso di risolvere.
Ultimamente ho ricevuto un progetto da un cliente con una bozza e una breve descrizione del sito Web e degli obiettivi che desiderano raggiungere. Insieme a questo brief c'erano note che indicavano che erano una società immobiliare e pubblicavano regolarmente proprietà su un noto sito web immobiliare e desideravano essere in grado di sindacare i loro contenuti su questo sito esterno sul proprio sito web senza dover aggiornare entrambi i siti. La presa: questo noto sito immobiliare non offriva un servizio di syndication o API per gli sviluppatori di accedere ai loro elenchi.
Dopo aver setacciato Internet ho scoperto che la maggior parte delle soluzioni a questo problema erano poco eleganti e per la maggior parte del tempo erano specifiche del browser o inefficaci. Ho deciso di codificare la mia soluzione utilizzando la famosa libreria javascript JQuery.
Per accedere alle informazioni da un altro sito web avevo bisogno di utilizzare le funzioni AJAX della libreria JQuery.
Se hai familiarità con JQuery, quanto sopra non dovrebbe essere troppo difficile da capire. Stiamo utilizzando la funzione di caricamento AJAX per caricare il contenuto di una pagina web in un elemento con id #content. La soluzione sembrava troppo semplice, ma purtroppo il problema, come ben presto si intuisce, è che il codice funzionerà solo su Internet Explorer 6 o 7. La ragione è presto evidente: tutti gli altri browser bloccano il caricamento di siti Web da domini alternativi a causa delle impostazioni di sicurezza locali. Ciò significa che possiamo caricare solo pagine relative non URL assoluti.
Mi sono guardato in giro online per una soluzione a questo problema e, con mio grande sgomento, la maggior parte delle persone aveva l'impressione che non fosse possibile ignorare le impostazioni di sicurezza locali della maggior parte dei browser o complicare troppo un compito, quindi non vale la pena farlo. Questo è quando ho scoperto la libreria CURL.
cURL è abbastanza utile in quanto consente di comunicare con altri server utilizzando URL e protocolli Web standard come HTTP, HTTPS o SSL. Utilizzo di cURL Sono stato in grado di creare un bypass per il nostro problema di sicurezza locale utilizzando il caricamento nell'intero sito Web a un URL locale lato server.
Questo codice avvia l'oggetto cURL da un URL esterno - il vantaggio è che l'URL viene caricato sul server piuttosto che sul client. Le impostazioni di sicurezza del server nell'ambiente PHP sono molto più flessibili rispetto alle impostazioni di sicurezza locali della maggior parte dei browser moderni. Dopo aver avviato l'oggetto cURL, stampiamo semplicemente l'intero contenuto dell'URL. Se ora salviamo questo documento come "curl.php" sul nostro server web, ora abbiamo un file locale che caricherà i contenuti dell'intero sito Web del nostro URL esterno.
Torniamo al nostro codice originale e inseriamo le nostre modifiche:
Il nostro script ora supporta tutti i browser e non viene eseguito utilizzando alcuno hack di sicurezza locale non ortodossa.
Ora ti potresti chiedere quali sono i vantaggi di lavorare con questo documento in JQuery rispetto alla semplice manipolazione del nostro documento usando PHP? La ragione principale della mia scelta nell'uso di JQuery è la possibilità di utilizzare i selettori in stile CSS per scegliere quali contenuti della nostra pagina vogliamo realmente sindacare, come il seguente:
Piuttosto che caricare l'intero documento, ora cariciamo semplicemente il contenuto di un elemento con id #content. Raggiungeremo i benefici di questo più avanti nell'articolo.
Dopo aver giocato con questo per un po 'potresti notare il prossimo grosso problema. Sebbene siamo riusciti a sindacare un contenuto di siti esterni, tutti i link e le immagini relative non funzionano più. Un altro motivo per lavorare in JQuery. Usando la funzione jQuery each () possiamo creare un ciclo che attraversa tutto e elementi che afferrano l'attributo HREF o SRC corrente e antepongono il dominio esterno su di esso.
Ora il problema a questo punto in cui ci imbattiamo è dove integriamo il nostro nuovo codice nel nostro codice esistente? Il problema in cui mi sono imbattuto in origine non importava da dove lo si fosse inserito, il markup esterno non si caricava abbastanza velocemente perché il nostro codice modificasse il dominio in modo che diventasse effettivo dopo il fatto. La soluzione consiste nel combinare i due in una soluzione JQuery abbastanza elegante.
Accentsconagua
$ ("document"). ready (function () $ ("# content"). load ("curl.php #content", , function () $ ("a"). each (function (i ) Var href = $ (this) .attr ('href'); var new_href = dominio + href; $ (this) .attr ('href', new_href););
$ ("img"). each (function (i) var src = $ (this) .attr ('src'); var new_src = dominio + src; $ (this) .attr ('src', new_src); ); ); ); La funzione di caricamento ha altre due proprietà che può assumere, una delle quali è la variabile che vuoi inviare al tuo URL esterno. Ad esempio, potresti provare a recuperare i dati dai risultati di un modulo POST. L'altra proprietà è una funzione di callback o cosa fare una volta terminata la funzione load (). Nel nostro caso questo è perfetto - inseriamo il nostro codice nella funzione di callback che ne impedisce l'esecuzione fino a quando non cariciamo completamente nella nostra pagina esterna.
Come puoi vedere ora siamo ora in grado di inserire qualsiasi elemento nel contenuto della nostra pagina da un altro sito web. Questo è molto pratico
non solo per la diffusione di contenuti come news feed ma qualsiasi contenuto aggiornato dinamicamente.
Ora che possiamo avere tirato dentro il nostro contenuto, il passo successivo mostra la superiorità nell'uso di questo codice oltre a dire a