Share
De nombreux sites Web proposent des formats de syndication tels que des services basés sur RSS, JSON ou XML pour permettre une livraison facile du contenu. Mais que se passe-t-il lorsqu'un site Web n'offre aucun de ces services? Comment syndiquer le contenu d'un site Web qui ne propose pas de flux de nouvelles? C'est ce que j'ai entrepris de résoudre.
J'ai récemment reçu un projet d'un client avec un résumé et un résumé du site Web et des objectifs qu'il souhaite atteindre. En plus de ce mémoire, des notes indiquant qu’elles étaient une société immobilière et publiaient régulièrement leurs biens sur un site Web immobilier bien connu et souhaitaient pouvoir syndiquer leur contenu sur ce site externe sur leur propre site Web sans avoir à mettre à jour les deux sites. Le piège: ce site immobilier bien connu n'offrait pas de service de syndication ni d'API aux développeurs pour accéder à leurs annonces..
Après avoir parcouru Internet, j'ai découvert que la plupart des solutions à ce problème étaient inélégantes et la plupart du temps, elles étaient spécifiques à un navigateur ou inefficaces. J'ai décidé de coder ma propre solution à l'aide de la célèbre bibliothèque javascript JQuery.
Pour accéder aux informations d'un autre site Web, je devais utiliser les fonctions AJAX de la bibliothèque JQuery..
Si vous connaissez JQuery, ce qui précède ne devrait pas être trop difficile à comprendre. Nous utilisons la fonction de chargement AJAX pour charger le contenu d'une page Web dans un élément avec id #content. La solution semblait trop facile, mais hélas le problème, comme vous vous en rendrez vite compte, est que le code ne fonctionnera que dans Internet Explorer 6 ou 7. La raison en est vite apparue: tous les autres navigateurs bloquent le chargement de sites Web appartenant à des domaines alternatifs. en raison des paramètres de sécurité locaux. Cela signifiait que nous ne pouvions charger que des pages relatives et non des URL absolues.
J'ai cherché en ligne une solution à ce problème et, à ma grande consternation, la plupart des gens ont eu l'impression qu'il n'était pas possible de contourner les paramètres de sécurité locaux de la plupart des navigateurs ou que la tâche était trop compliquée et donc inutile. C'est à ce moment que j'ai découvert la bibliothèque cURL.
cURL est très utile car il vous permet de communiquer avec d'autres serveurs à l'aide d'URL et de protocoles Web standard tels que HTTP, HTTPS ou SSL. À l’aide de cURL, j’ai pu contourner notre problème de sécurité local en chargeant l’ensemble du site Web sur une URL locale côté serveur..
Ce code initie l'objet cURL à partir d'une URL externe - l'avantage étant que l'URL est chargée sur le serveur plutôt que sur le client. Les paramètres de sécurité du serveur dans l'environnement PHP sont beaucoup plus flexibles que les paramètres de sécurité locaux de la plupart des navigateurs modernes. Après avoir lancé l'objet cURL, nous imprimons simplement l'intégralité du contenu de l'URL. Si nous sauvegardons maintenant ce document sous le nom 'curl.php' sur notre serveur Web, nous avons maintenant un fichier local qui va charger l'intégralité du contenu du site web de notre URL externe.
Revenons à notre code original et intégrons nos modifications:
Notre script prend désormais en charge tous les navigateurs et n’est pas compliqué par des attaques de sécurité locales peu orthodoxes..
Vous vous demandez maintenant quels sont les avantages de travailler avec ce document dans JQuery par rapport à une simple manipulation de notre document à l’aide de PHP? La principale raison de mon choix d’utiliser JQuery est la possibilité d’utiliser ses sélecteurs de style CSS pour choisir le contenu de notre page que nous souhaitons réellement syndiquer, comme suit:
Plutôt que de charger l'ensemble du document, nous ne faisons que charger le contenu d'un élément avec id #content. Nous verrons les avantages de cela plus tard dans l'article.
Après avoir joué un peu avec cela, vous remarquerez peut-être le prochain gros problème. Bien que nous ayons réussi à syndiquer un contenu de sites externes, tous les liens et images relatifs ne fonctionnent plus.. Une autre raison de travailler dans JQuery. En utilisant la fonction eachQ (JQuery each), nous pouvons créer une boucle qui parcourt tous les et éléments saisissant l'attribut HREF ou SRC actuel et y ajoutant le domaine externe.
Le problème auquel nous sommes confrontés à ce stade-ci est de savoir où intégrer notre nouveau code dans notre code existant. Le problème que j’ai rencontré au début était que, peu importe l’endroit où vous le placiez, le balisage externe ne se chargeait pas assez rapidement pour que notre code modifie le domaine afin qu’il entre en vigueur après les faits. La solution consiste à combiner les deux en une solution JQuery tout à fait élégante..
Accentsconagua
$ ("document"). ready (function () $ ("# contenu"). load ("curl.php #content", , function () $ ("a"). each (fonction (i ) Var href = $ (this) .attr ('href'); var new_href = domaine + href; $ (this) .attr ('href', new_href););
$ ("img"). each (fonction (i) var src = $ (this) .attr ('src'); var new_src = domaine + src; $ (this) .attr ('src', new_src); ); ); ); La fonction de chargement possède deux propriétés supplémentaires, l'une d'elles étant les variables que vous souhaitez soumettre à votre URL externe. Par exemple, vous pourriez essayer de récupérer des données à partir des résultats d'un formulaire POST. L'autre propriété étant une fonction de rappel ou quoi faire une fois que la fonction load () est terminée. Dans notre cas, c'est parfait - nous plaçons notre code dans la fonction de rappel, ce qui l'empêche de fonctionner tant que nous n'avons pas chargé notre page externe..
Comme vous pouvez le constater, nous pouvons désormais extraire simplement n'importe quel élément du contenu de notre page à partir d'un autre site Web. C'est très pratique
pour ne pas simplement syndiquer du contenu comme des flux d'actualités, mais tout contenu mis à jour dynamiquement.
Maintenant que nous pouvons avoir tiré notre contenu, la prochaine étape montre la supériorité de l’utilisation de ce code par rapport à un