• Récupérer des données sur une autre page du blog

    Comme vous avez pu le constater sur la page d'accueil du blog, il est possible de récupérer du contenu présent dans une autre page de votre blog.

     

     

    L'élément ci-contre vient d'être récupéré sur la page contact à l'aide d'une iframe et d'un peu de javascript. Je l'ai juste un peu rétréci à l'aide de la propriété zoom.

    Pour ceux qui ne connaissent pas, l'iframe est une balise HTML qui vous permet d'afficher le contenu d'une autre page web. Alors vous allez me dire : Oui mais pourquoi du javascript ? La réponse est toute simple, c'est le seul moyen d'accéder au contenu de cette page. En conclusion, si vous voulez afficher une page complète, vous utiliserez simplement l'iframe et si vous voulez récupérer une partie de son contenu, alors vous ajouterez un peu de javascript.

    Mais pas de panique, je vais vous expliquer ça en détail !

    Cette méthode ne fonctionne qu'avec des pages appartenant au même domaine. Elle ne fonctionnera donc qu'avec les pages de votre blog.

     

    Le Tuto

    Nous allons dans ce tuto essayer de récupérer le tableau qui se trouve à cette page

    Mise en place de l'iframe

    Pour l'iframe, rien de plus simple. On va simplement entrer le code HTML ci-dessous (bien entendu toujours avec le bouton HTML de l'éditeur):

    La propriété display:none permet de cacher l'iframe (mais peu importe, on sait qu'elle est là et on veut extraire juste une petite partie de cette iframe)

    Dans src, vous mettez l'adresse de la page ou se trouve ce que vous voulez.

    Pour ceux qui désirent afficher l'iframe complète, alors vous avez fini le tuto. Il vous suffit juste de supprimer la propriété style

    Pour l'utilisation seule de l'iframe, vous pouvez indiquer n'importe quelle url valide. Il n'y a que si vous voulez en extraire du contenu qu'il faut qu'elle pointe sur le même domaine.

     

    Récupération du contenu

    Récupérer des données sur une autre page du blog

    Vous pouvez voir une partie du code source de la page sur l'image ci-contre (voir le cadre en bas à gauche de l'image). Ce qui nous interesse particulièrement est la ligne correspondant au tableau et donc celle commençant par <table style... (surligné en gris dans l'image).

    Chouette ! On se rend compte que cette table est affectée de la classe tab_general. Mieux encore, elle est située sous une balise div dont l'id est tabexemple. On va donc pouvoir y accéder très facilement.

    Si ce tableau n'avait disposé ni de classe, ni d'id, on aurait pu y accéder directement à l'aide de la balise table ou encore à l'aide de l'id du module qui contient cette table (module_html368605) etc. Dans ce cas il vous faudra de bonnes notions de javascript car vous serez amenés à utiliser les fonctions parentNode, childNodes, firstchild etc

    On est donc paré. On a maintenant toutes les infos pour récupérer ce que l'on veut.

    Comme vous avez la main mise sur votre blog, essayez dans la mesure du possible d'encapsuler la partie que vous voulez récupérer dans une balise div comme je l'ai fait pour le tableau avec la la div d'id tabexemple. Cela vous fera gagner beaucoup de temps ^^

    Il va falloir placer ce que l'on récupère quelque part. On va donc créer une boite div qui servira à récupérer ce contenu (ici marecupbox).

     Le code HTML à placer dans votre article devient donc:

    Le code javascript est à placer de préférence dans un module simple HTML des menus.

    Explication du javascript  

    Ce code javascript est exécuté grâce à window.onload une fois que la page est chargée. Si on n'attend pas cette fin de chargement, le script risque d'être exécuté avant que l'iframe ne soit chargée et on ne pourra pas trouver l'élément voulu.

    On teste si l'iframe existe et on appelle la fonction recupFrame() qui se charge de récupérer le contenu de tabexemple et de le placer dans mabox.

    Voyez le résultat ci-contre


    Chargement en cours

      

    Si votre blog comporte déjà des scripts qui utilisent window.onload alors il est probable que certains des scripts ne fonctionnent pas. Il ne faut faire appel qu'une seule fois à window.onload dans une page. La solution consiste soit à placer le code javascript dans le window.onload existant de votre blog ou alors de tout mettre dans votre article avec un timer pour laisser le temps à la page d'être chargée. Dans ce cas vous pouvez mettre le code suivant directement dans l'article: