Récupérer un élément depuis un iFrame

Comment obtenez-vous un <div>de l'intérieur d'un <iframe>?

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

Vous pourriez plus simplement écrire:

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

et le premier document interne valide sera retourné.

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

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

N'oubliez pas d'accéder à iframe après son chargement . Moyen ancien 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>

window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() est la fonction à l'intérieur de la page et cette action de fonction sur elle

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

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

L'astuce ici est la .contents()méthode de jQuery , contrairement à .children()ce 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 d'un document iframe en l'utilisant.

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

Notez que l'iframe et la page doivent être sur le même domaine.

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 ceci pour récupérer l'élément:

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

Si l'iframe n'est pas dans le même domaine, de sorte que vous ne pouvez pas accéder à ses éléments 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 parent, ce qui permet vous de partager des informations entre les pages. Quelques sources:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• Html5 - Post-message Iframe du navigateur croisé - enfant à parent?
• cross site iframe postMessage de l'enfant au parent

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

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