web-dev-qa-db-fra.com

Obtenir un élément depuis un iFrame

Comment obtenez-vous un <div> dans un <iframe>?

javascriptiframehtml
193
joepour
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

Vous pouvez plus simplement écrire:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

et le premier document interne valide sera renvoyé.

Une fois que vous avez reçu le document interne, vous pouvez simplement accéder à ses éléments internes de la même manière que vous accédez à n’importe quel élément de votre page actuelle. (innerDoc.getElementById... etc.)

IMPORTANT: Assurez-vous que l'iframe est sur le même domaine, sinon vous ne pourrez pas accéder à ses composants internes. Ce serait un script intersite.

329
geowa4

N'oubliez pas d'accéder à iframe après son chargement . Manière ancienne mais fiable sans jQuery:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>
6
lukyer
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() est une fonction dans la page et cette action est active

3
VishalDream

Les réponses ci-dessus ont donné de bonnes solutions en utilisant Javscript . Voici une solution simple de jQuery: 

$('#iframeId').contents().find('div')

Le truc ici est la méthode .contents() de jQuery, contrairement à .children() qui ne peut obtenir que des éléments HTML, .contents() peut obtenir à la fois des nœuds de texte et des éléments HTML. C'est pourquoi on peut obtenir le contenu du document d'un iframe en l'utilisant. 

Pour en savoir plus sur jQuery .contents(): .contents ()

Notez que l'iframe et la page doivent appartenir au même domaine.

1
SkuraZZ

Aucune des autres réponses ne fonctionnait pour moi. J'ai fini par créer une fonction dans mon iframe qui renvoie l'objet que je cherchais:

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

Ensuite, vous appelez cette fonction comme suit pour récupérer l'élément:

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();
1
craned

Si l'iframe ne se trouve pas dans le même domaine, vous ne pouvez pas accéder à ses composants internes à partir du parent mais vous pouvez modifier le code source de l'iframe, vous pouvez modifier la page affichée par l'iframe pour envoyer des messages à la fenêtre parente, ce qui permet vous de partager des informations entre les pages. Quelques sources:

0
Jose

Le code ci-dessous vous aidera à découvrir les données d'iframe.

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
0
ashish naghate