Utiliser jQuery dans une iframe
Une iframe est un élément HTML assez particulier puisqu'il permet d'insérer une page web dans une autre page web, en l'affichant dans un rectangle à l'intérieur de la page parente. En règle générale, les iframes sont utilisées exclusivement pour afficher des données d'un site externe (c'est à dire sur un domaine différent), on en rencontre très souvent :
- Player embarqué d'un site de vidéo comme Youtube, Dailytmotion ou Vimeo
- Bloc de publicité d'une régie publicitaire comme Google Adsense
- Bouton de vote Facebook "J'aime", bouton Twitter
- Concours "Kontest"
L'accès au contenu d'une iframe depuis la page parente, ou l'inverse (c'est à dire l'accès à la page parente depuis une iframe) en Javascript est interdit pour assurer la confidentialité et la sécurité du navigateur web. C'est ce qu'on appelle le same origin policy, qui restreint aussi les appels AJAX XML et JSON (JSONp).
Mais il arrive aussi qu'on trouve une iframe sur le même domaine (en général c'est une très mauvaise idée, cela trahit la plupart du temps un gros problème d'architecture... mais ça n'est pas le sujet de ce tuto). Dans ce cas, il est possible d'utiliser jQuery pour manipuler le contenu d'une iframe.
Accéder à une iframe avec jQuery
Voici un petit exemple avec une page parente et une iframe :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Parent</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <p class="description">Lorem ipsum</p> <iframe id="child_iframe" width="336" height="280" src="iframe.html" frameborder="0" allowtransparency="true" scrolling="no"></iframe> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Iframe</title> </head> <body> <h1>Blue iframe</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ol> </body> </html>
Pour accéder à l'iframe depuis la page parente, il y a deux méthodes. La première consiste à sélectionner l'iframe puis à utiliser .contents() pour accéder à l'objet document de l'iframe - on peut alors utiliser toutes les fonctions jQuery habituelles pour requêter le DOM, comme .find() pour trouver des éléments dans la descendance. L'autre solution c'est de donner un contexte au sélecteur jQuery : le contexte est le second paramètre du sélecteur, il sert à restreindre sa portée à un élément (en l'occurrence, le document de l'iframe) :
jQuery(document).ready(function($){
$('iframe#child_iframe').load(function(e){
// Sélectionner le document de l'iframe (contentDocument)
$('iframe#child_iframe').contents().find('li');
// Sélectionner via un contexte jQuery
$('li', $('iframe#child_iframe').contents());
});
});
Les 2 codes ci-dessus sont équivalents, choisissez celle que vous préférez. Notez qu'il faut utiliser le handler load pour attendre le chargement du contenu de l'iframe.
Si vous voulez en savoir plus c'est par ici : trier les données dans excel.
Accéder au parent depuis une iframe
Tout comme il est possible d'accéder au contenu d'une iframe depuis la page parente, on peut aussi faire l'inverse, c'est-à-dire accéder à la page parente depuis une iframe (toujours à condition qu'elles soient sur le même domaine, il n'y a aucune exception à la same origin policy).
Pour cela, il suffit d'utiliser window.parent qui contient une référence vers l'objet window de la page parent :
window.parent.jQuery('p.description').html();
On peut même utiliser le jQuery du parent dans l'iframe (pour éviter d'avoir à inclure jQuery aussi dans l'iframe) :
window.parent.jQuery('li', document); Fini de lire cette page ? allez faire un tour ici : texte fantôme, ça peut vous intéresser.
