Sélectionner un élément dans une iframe avec jQuery

Question

Dans notre application, nous analysons une page web et la chargeons dans une autre page dans une iframe. Tous les éléments de cette page chargée ont leur ID de jeton. Je dois sélectionner les éléments en fonction de ces identifiants. Autrement dit, je clique sur un élément de la page principale et je sélectionne l'élément correspondant dans la page de l'iframe. Avec l'aide de jQuery, je procède de la manière suivante :

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

Cependant, avec cette fonction, je ne peux sélectionner que les éléments de la page en cours, et non ceux de l'iFrame. Quelqu'un pourrait-il me dire comment sélectionner les éléments dans l'iFrame chargée ?

Gracias.

Answer 1

var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

Il convient également de noter que si le src de cette iframe pointe vers un domaine différent, pour des raisons de sécurité, vous ne pourrez pas accéder au contenu de cette iframe en javascript.

Answer 2

Jetez un coup d'œil à cet article : http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

Placez votre sélecteur dans la méthode find.

Il se peut toutefois que cela ne soit pas possible si l'iframe ne provient pas de votre serveur. D'autres messages parlent d'erreurs de refus d'autorisation.

jQuery/JavaScript : accès au contenu d'une iframe

Answer 3

Lorsque votre document est prêt, cela ne signifie pas que votre iframe l'est aussi,
vous devez donc écouter l'événement de chargement de l'iframe, puis accéder à votre contenu :

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});

Answer 4

S'il s'agit d'accéder à l'IFrame via la console, par exemple Chrome Dev Tools, vous pouvez simplement sélectionner le contexte des requêtes DOM via le menu déroulant (voir l'image).

Answer 5

Voici un simple JQuery qui permet de faire glisser une div dans un seul conteneur :

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );