Sélection d'un élément dans iFrame jQuery

122

Dans notre application, nous analysons une page Web et la chargeons dans une autre page dans un iFrame. Tous les éléments de cette page chargée ont leur tokenid-s. J'ai besoin de sélectionner les éléments par ces tokenid-s. Signifie - Je clique sur un élément de la page principale et sélectionne l'élément correspondant dans la page dans l'iFrame. Avec l'aide de jQuery, je le fais de la manière suivante:

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

Cependant, avec cette fonction, je peux sélectionner les éléments dans la page actuelle uniquement, pas dans l'iFrame. Quelqu'un pourrait-il me dire comment puis-je sélectionner les éléments dans l'iFrame chargé?

Merci.

javascript iframe getelementbyid

— cycero
source

157

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

Notez également que si le srcde 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.

— Darin Dimitrov
source

8

Gardez à l'esprit que $ ('iframe') ne renvoie pas directement l'iframe. Vous devez le retirer du tableau.

— McKayla

Merci pour la volonté d'aider. Mais cela ne semble pas fonctionner.

— cycero

3

@cycero, ça devrait marcher. Générez-vous cet iframe dynamiquement? N'oubliez pas que si vous pointez l'élément src de cette iframe vers un autre domaine que le vôtre pour des raisons de sécurité, vous ne pouvez pas accéder à son contenu.

— Darin Dimitrov du

Je ne le charge pas depuis un domaine différent mais depuis le même dossier. Le contenu iFrame est généré dynamiquement et stocké sous forme de fichier sur le serveur. Ensuite, ce fichier est chargé dans iFrame.

— cycero

@cycero, j'ai mis à jour ma réponse. Essayez de passeriframe.contents()

— Darin Dimitrov

52

Jetez un œ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 de recherche.

Cependant, cela peut ne pas être possible si l'iframe ne provient pas de votre serveur. D'autres articles parlent d'erreurs de refus d'autorisation.

jQuery / JavaScript: accéder au contenu d'une iframe

— Kevin Bowersox
source

Cela fonctionne en termes d'obtention du HTML de l'élément, mais comment puis-je ajouter une classe CSS à cet élément sélectionné? $ ("# iframeDiv"). contents (). find ("[tokenid =" + token + "]"). addClass ("border"); ne semble pas fonctionner.

— cycero

1

Obtenez-vous des erreurs d'autorisation refusées? Pouvez-vous me donner le code HTML de l'iframe?

— Kevin Bowersox du

Non, aucune autorisation n'a refusé les problèmes.

— cycero

20

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

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

— Tarif Alnamrouti
source

-3

Si le cas accède à l'IFrame via la console, par exemple Chrome Dev Tools, vous pouvez simplement sélectionner le contexte des requêtes DOM via la liste déroulante (voir l'image).

— tibersky
source

-9

voici JQuery simple pour faire ceci pour rendre div déplaçable avec dans un seul conteneur:

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

— Rajasekharreddy Kadasani
source