Comment exposer l'IFrame DOM à l'aide de jQuery?

J'ai un prototype représentant un particual IFrame. Ce prototype ont une fonction appelée GoToUrl(...) que s'ouvre l'url donnée dans l'IFrame.

Ma question est: Comment puis-je créer un "InternalDOM" de la propriété et de faire de cette propriété, reportez-vous à la "fenêtre" de l'objet (la racine de l'objet DOM) de l'IFrame à l'intérieur? De telle façon que: Si mon IFrame expose une page qui a un objet X dans la fenêtre "objet" que je pouvais faire:

MyFrameObject.GoToUrl(pageXurl);
MyFrameObject.InternalDOM.X

Toute aide serait appréciée.

PS: j'accepte les réponses ne sont pas nécessairement liées à jQuery, mais je préfère un jQuery solution.

InformationsquelleAutor André Pena | 2009-10-31
  1. 67

    Pour obtenir le window objet pour une image vous pouvez utiliser l' window.frames tableau:

    var iframewindow= frames['iframe_name'];

    Cela nécessite que vous donner la <iframe> un de la vieille école name attribut au lieu de ou en tant que bien que la id. Sinon, si vous savez l'ordre de l'iframe sur la page, vous pouvez indice numérique:

    var iframewindow= frames[0];

    Il est généralement plus souple pour obtenir la fenêtre iframe à partir de l'élément iframe dans les DOM, mais cela nécessite une certaine compatibilité de code à composer avec IE:

    var iframe= document.getElementById('iframe_id');
var iframewindow= iframe.contentWindow? iframe.contentWindow : iframe.contentDocument.defaultView;

    jQuery définit la contenu() méthode pour saisir le document nœud, mais il ne vous donne pas une manière de croix-navigateur pour aller de la document à la window, de sorte que vous êtes toujours coincé avec:

    var iframe= $('#iframe_id')[0];
var iframewindow= iframe.contentWindow? iframe.contentWindow : iframe.contentDocument.defaultView;

    qui n'est pas vraiment une grande victoire.

    (Remarque: faites très attention en utilisant jQuery pour la croix-cadre de programmation. Chaque image a besoin de sa propre copie de jQuery et des méthodes à partir d'une image de la copie ne fonctionnera pas nécessairement sur les nœuds de l'autre. La croix-cadre de programmation est un sujet semé de pièges.)

    InformationsquelleAutor bobince
  2. 36

    Pour résumer

    Accès iframe contenu de la page parent

    var iframe = $('iframe').contents(); //iframe.find('..') ...

    Accéder à la page parent contenu de l'iframe

    var parent = $(window.parent.document); //parent.find('..') ...

    Cela s'applique uniquement lorsque le parent et l'iframe pages sont sur le même domaine.

    EDIT: en charge de l'enfant iframes exemple:

    parent html

    <iframe id="iframe1" src="iframe1.html"></iframe>
<iframe id="iframe2" src="iframe2.html"></iframe>

    parent js

    $(function () {
    var iframe1 = null,
        iframe2 = null;

    //IE8/7
    var frameInterval = window.setInterval(function () {
        iframe1 = $('#iframe1').contents();
        iframe2 = $('#iframe2').contents();
        if ($('head', iframe1).length && $('head', iframe2).length) {
            window.clearInterval(frameInterval);
        }
    }, 100);

    //on iframe loaded
    $('#iframe1').on('load', function (e) {
        iframe1 = $('#iframe1').contents();
    });
    $('#iframe2').on('load', function (e) {
        iframe2 = $('#iframe2').contents();
    });
});

    Tous les principaux navigateurs, y compris IE9 travail avec le on('load') lignes. Seulement IE8/7 besoin de l'intervalle de bloc.

    • Merci, m'a sauvé quelques temps 🙂
    • Merci à vous , vous l'avez décrit très clairement
    InformationsquelleAutor simo
  3. 8

    Mise à JOUR @RoyiNamir 's commentaire:

    var frames = window.frames || window.document.frames;

    pour la fenêtre dans un iframe.

    frames["myIframeId"].window

    pour le document dans une iframe

    frames["myIframeId"].window.document

    pour le corps dans une iframe 

    frames["myIframeId"].window.document.body

    pour le corps dans une iframe avec jquery

    var iframeBody = $(frames["myIframeId"].window.document).contents().find("body");

    IMPORTANT:
    vous devriez toujours vérifier que le document est avec le statut "terminé" pour travailler avec ce

    if (frames["myIframeId"].window.document.readyState=="complete")
{
   //ok
}
else
{
   //perform a recursive call until it is complete
}
    • merci! elle fonctionne.
    • descalzo je n'ai pas été levés changements depuis que vous avez écrit cette réponse, mais window.document.frames ne fonctionne plus, au moins pas dans Firefox et Chrome. L'édition de votre message.
    • de la fenêtre.document.images nt de travail. de la fenêtre.images - ne
    • merci pour la clarification, dans IE fonctionne bien mais n'est pas compatible avec les autres navigateurs
    InformationsquelleAutor andres descalzo