Share
Multe site-uri web oferă formate de sindicalizare, cum ar fi servicii RSS, JSON sau XML, pentru a permite livrarea ușoară a conținutului. Dar ce se întâmplă atunci când un site web nu oferă unul dintre aceste servicii? Cum puteți sindica conținut de pe un site care nu oferă un flux de știri? Aceasta este ceea ce am hotărât să rezolve.
Am primit recent un proiect de la un client cu o schiță și o scurtă prezentare a site-ului și obiectivele pe care doresc să le îndeplinească. Împreună cu această scurtă au fost note care indicau faptul că au fost o companie imobiliară și au plasat în mod regulat proprietăți pe un site de bunuri imobiliare bine-cunoscute și au dorit să își poată sindica conținutul pe acest site extern pe site-ul lor propriu, fără a fi nevoie să actualizeze ambele site-uri. Captura: acest site imobiliar bine cunoscut nu a oferit un serviciu de sindicalizare sau un API pentru dezvoltatori care să le acceseze listele.
După ce am spălat internetul, am descoperit că majoritatea soluțiilor la această problemă au fost inelegante și, de cele mai multe ori, acestea erau specifice browserului sau ineficiente. Am decis să cod codul propriei mele soluții utilizând jQuery, cea mai populară bibliotecă javascript.
Pentru a accesa informații de pe un alt site am avut nevoie să utilizez funcțiile AJAX ale bibliotecii JQuery.
Dacă sunteți familiarizat cu JQuery, cele de mai sus nu ar trebui să fie prea greu de înțeles. Folosim funcția de încărcare AJAX pentru a încărca conținutul unei pagini Web într-un element cu id #content. Soluția părea prea ușoară, dar, din nefericire, vă va da seama că codul va funcționa numai în Internet Explorer 6 sau 7. Motivul pentru acest lucru a devenit rapid evident - toate celelalte browsere blochează încărcarea site-urilor din domenii alternative din cauza setărilor locale de securitate. Aceasta a însemnat că putem încărca numai pagini relative, nu adrese URL absolute.
M-am uitat în jur pentru o soluție la această problemă și spre dezamăgirea mea, majoritatea oamenilor au fost fie sub impresia că nu a fost posibil să ocolească setările locale de securitate ale majorității browserelor, fie că era prea complicat o sarcină, deci nu merita să faci. Atunci am descoperit biblioteca cURL.
cURL este destul de utilă, deoarece vă permite să comunicați cu alte servere utilizând URL-uri și protocoale web standard, cum ar fi HTTP, HTTPS sau SSL. Folosind cURL am reușit să construiesc un bypass pentru problema noastră de securitate locală prin utilizarea încărcării pe întregul site web la o adresă URL locală a serverului.
Acest cod inițiază un obiect cURL dintr-o adresă URL externă - avantajul fiind că adresa URL este încărcată mai degrabă pe server decât pe client. Setările de securitate ale serverului în mediul PHP sunt mult mai flexibile decât setările de securitate locale ale celor mai moderne browsere. După inițierea obiectului cURL, vom imprima pur și simplu întregul conținut al URL-ului. Dacă acum salvăm acest document ca "curl.php" pe serverul nostru web, avem acum un fișier local care se va încărca în întregul conținut al site-ului adresei noastre externe.
Să ne întoarcem la codul nostru original și să punem în modificările noastre:
Scenariul nostru acceptă acum toate browserele și nu este realizat cu ajutorul unor hack-uri de securitate locale neortodoxe.
Acum s-ar putea întreba care sunt avantajele de a lucra cu acest document în JQuery în comparație cu manipularea doar documentul nostru folosind PHP? Principalul motiv al alegerii mele în utilizarea JQuery este abilitatea de a utiliza selectorii ei în stil CSS pentru a alege ce conținut de pe pagina noastră dorim de fapt să facem sindicat, cum ar fi:
Mai degrabă decât încărcarea în întreg documentul, acum încărcăm doar conținutul unui element cu id #content. Vom profita de acest lucru mai târziu în articol.
După ce ați jucat puțin pentru asta, puteți observa următoarea problemă mare. Deși am reușit să sindicam un conținut de site-uri externe, toate legăturile relative și imaginile nu mai funcționează. Un alt motiv pentru care lucrezi în JQuery. Folosind funcția JQuery every (), putem crea o buclă care trece prin toate și elemente care capturează atributul curent HREF sau SRC și prefixează domeniul extern pe acesta.
Acum, problema de la care ne confruntăm este locul în care integrăm noul nostru cod în codul nostru existent? Problema pe care am întâlnit-o inițial a fost că indiferent unde ați pus-o, marcajul extern nu sa încărcat suficient de repede pentru ca codul nostru să schimbe domeniul după ce a intrat în vigoare. Soluția implică combinarea celor două într-o soluție destul de elegantă JQuery.
Accentsconagua
$ ("document") gata (functie () $ ("# content"). ) Var href = $ (acest) .attr ('href'); var nou_href = domeniu + href; $ (acest) .attr ('href';
$ (acest lucru) .attr ('src', new_src); fiecare (funcția (i) var src = $ (this) .attr ('src'); ); ); ); Funcția de încărcare are încă două proprietăți pe care le puteți lua, una fiind variabilele pe care doriți să le trimiteți la adresa URL externă. De exemplu, ați putea încerca să preluați date din rezultatele unui formular POST. Cealaltă proprietate este o funcție de apel invers sau ce trebuie făcut de îndată ce funcția load () a terminat. În cazul nostru, acest lucru este perfect - plasăm codul nostru în funcția de apel invers care îl împiedică să ruleze până când încărcăm complet pagina noastră externă.
După cum puteți vedea acum, acum suntem capabili să tragem pur și simplu în orice element din conținutul paginii noastre dintr-un alt site web. Acest lucru este foarte practic
nu doar pentru sindicalizarea conținutului, cum ar fi fluxurile de știri, ci și pentru orice conținut actualizat dinamic.
Acum că am reușit să ne tragem conținutul, următorul pas arată superioritatea utilizării acestui cod peste un cuvânt