Comment détecter si un iframe a déjà été chargé

Il semble que $('#someIframe').load(function(){...}) ne se déclenche pas si elle est attachée après l'iframe a fini de charger. Est-ce exact?

Ce que j'aimerais vraiment est d'avoir une fonction qui est toujours appelé une seule fois lors de ou après un iframe est chargé. Pour rendre cela plus clair, voici deux cas:

  • Iframe n'a pas encore chargé: exécuter une fonction de rappel une fois qu'il se charge.
  • Iframe a déjà chargé: exécuter la fonction de rappel immédiatement.

Comment puis-je faire cela?

  • Est l'iframe dans le même domaine que la page qui veut savoir quand il est chargé? Avez-vous contrôler le contenu de l'iframe? ou est le contenu de l'iframe connu?
  • Ressemble à la même question que this
  • Donc, comme une question de fait, il est dans le même domaine. Bien sûr, la meilleure réponse serait la même pour les deux. Idéalement, je ne veux pas d'une page à modifier le contenu dans l'autre page, ou le contrôle de variables dans une autre page.
  • Mike W - Cette question ne mentionne pas comment faire si l'iframe est / peut-être déjà chargé. C'est la question principale pour moi.
  • Comme de jQuery 3.0, load est allé. S'il vous plaît essayer .on('load', function() { ... }) à la place.
InformationsquelleAutor B T | 2013-06-18
  1. 37

    J'ai cogné la tête contre un mur jusqu'à ce que j'ai trouvé ce qui se passe ici.

    Informations d'arrière-plan

    • À l'aide de .load() n'est pas possible si l'iframe a déjà été chargé (événement se déclenche jamais)
    • À l'aide de .ready() sur un élément iframe n'est pas pris en charge (référence) et va appeler la fonction de rappel immédiatement, même si l'iframe n'est pas encore chargé,
    • À l'aide de postMessage ou un appel d'un conteneur de fonction sur load à l'intérieur de l'iframe n'est possible que lorsque le contrôle
    • À l'aide de $(window).load() sur le conteneur serait également attendre pour les autres actifs, à la charge, comme des images et d'autres iframes. Ce n'est pas une solution si vous voulez attendre seulement pour un iframe
    • Vérification readyState en Chrome pour une alredy tiré événement onload est vide de sens, comme Chrome initialise tous les iframe avec un "about:blank" page vide. Le readyState de cette page peut être complete, mais ce n'est pas le readyState de la page que vous attendez (src attribut).

    Solution

    Il est nécessaire de:

    1. Si l'iframe n'est pas encore chargé, nous pouvons observer la .load() événement
    2. Si l'iframe a été chargé déjà nous avons besoin de vérifier la readyState
    3. Si le readyState est complete, on peut normalement supposer que l'iframe a déjà été chargé. Toutefois, en raison de la sus-nommée comportement de Chrome en outre, nous devons vérifier si c'est la readyState d'une page vide
    4. Si oui, nous avons besoin d'observer la readyState dans un intervalle de vérifier si le document lui-même (liée à l'attribut src) est complete

    J'ai résolu ce problème avec la fonction suivante. Il a été (transpiled à ES5) testé avec succès dans

    • Chrome 49
    • Safari 5
    • Firefox 45
    • IE 8, 9, 10, 11
    • Bord 24
    • iOS 8.0 ("Safari Mobile")
    • Android 4.0 ("Browser")

    Fonction de prise de jquery.marque

    /**
* Will wait for an iframe to be ready
* for DOM manipulation. Just listening for
* the load event will only work if the iframe
* is not already loaded. If so, it is necessary
* to observe the readyState. The issue here is
* that Chrome will initialize iframes with
* "about:blank" and set its readyState to complete.
* So it is furthermore necessary to check if it's
* the readyState of the target document property.
* Errors that may occur when trying to access the iframe
* (Same-Origin-Policy) will be catched and the error
* function will be called.
* @param {jquery} $i - The jQuery iframe element
* @param {function} successFn - The callback on success. Will 
* receive the jQuery contents of the iframe as a parameter
* @param {function} errorFn - The callback on error
*/
var onIframeReady = function($i, successFn, errorFn) {
try {
const iCon = $i.first()[0].contentWindow,
bl = "about:blank",
compl = "complete";
const callCallback = () => {
try {
const $con = $i.contents();
if($con.length === 0) { //https://git.io/vV8yU
throw new Error("iframe inaccessible");
}
successFn($con);
} catch(e) { //accessing contents failed
errorFn();
}
};
const observeOnload = () => {
$i.on("load.jqueryMark", () => {
try {
const src = $i.attr("src").trim(),
href = iCon.location.href;
if(href !== bl || src === bl || src === "") {
$i.off("load.jqueryMark");
callCallback();
}
} catch(e) {
errorFn();
}
});
};
if(iCon.document.readyState === compl) {
const src = $i.attr("src").trim(),
href = iCon.location.href;
if(href === bl && src !== bl && src !== "") {
observeOnload();
} else {
callCallback();
}
} else {
observeOnload();
}
} catch(e) { //accessing contentWindow failed
errorFn();
}
};

    Exemple de travail

    Composé de deux fichiers (index.html et iframe.html):
    index.html:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function() {
/**
* Will wait for an iframe to be ready
* for DOM manipulation. Just listening for
* the load event will only work if the iframe
* is not already loaded. If so, it is necessary
* to observe the readyState. The issue here is
* that Chrome will initialize iframes with
* "about:blank" and set its readyState to complete.
* So it is furthermore necessary to check if it's
* the readyState of the target document property.
* Errors that may occur when trying to access the iframe
* (Same-Origin-Policy) will be catched and the error
* function will be called.
* @param {jquery} $i - The jQuery iframe element
* @param {function} successFn - The callback on success. Will 
* receive the jQuery contents of the iframe as a parameter
* @param {function} errorFn - The callback on error
*/
var onIframeReady = function($i, successFn, errorFn) {
try {
const iCon = $i.first()[0].contentWindow,
bl = "about:blank",
compl = "complete";
const callCallback = () => {
try {
const $con = $i.contents();
if($con.length === 0) { //https://git.io/vV8yU
throw new Error("iframe inaccessible");
}
successFn($con);
} catch(e) { //accessing contents failed
errorFn();
}
};
const observeOnload = () => {
$i.on("load.jqueryMark", () => {
try {
const src = $i.attr("src").trim(),
href = iCon.location.href;
if(href !== bl || src === bl || src === "") {
$i.off("load.jqueryMark");
callCallback();
}
} catch(e) {
errorFn();
}
});
};
if(iCon.document.readyState === compl) {
const src = $i.attr("src").trim(),
href = iCon.location.href;
if(href === bl && src !== bl && src !== "") {
observeOnload();
} else {
callCallback();
}
} else {
observeOnload();
}
} catch(e) { //accessing contentWindow failed
errorFn();
}
};
var $iframe = $("iframe");
onIframeReady($iframe, function($contents) {
console.log("Ready to got");
console.log($contents.find("*"));
}, function() {
console.log("Can not access iframe");
});
});
</script>
<iframe src="iframe.html"></iframe>
</body>
</html>

    iframe.html:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>

    Vous pouvez également modifier la src attribut à l'intérieur de index.html, par exemple "http://example.com/". Juste jouer un peu avec elle.

    • Cela représente une dépendance sur markjs.io/s jqueryMark plugin? J'essaie de comprendre quel est le but de l'écoute pour load.jqueryMark à l'intérieur de observeOnload? Je peux voir que si le contenu de l'iframe src est "about:blank" il va appeler observeOnload et attendre jqueryMark...mais pourquoi jqueryMark?
    • Le observerOnload fonction et load événement sont deux choses différentes. Le load.jqueryMark est juste un espace de noms, ce qui rend possible pour vous désabonner après un load a été congédié. Il n'est pas nécessaire d'avoir mark.js inclus, il n'y a pas de dépendance. Cependant, je vous recommande d'utiliser la dernière version du code à partir de la dépôt.
    • Il n'y a aucune chance d'accéder à un iframe à partir d'une origine différente, sauf si vous installez une extension de navigateur comme de la SCRO. Par conséquent, le script met en œuvre une solution de repli.
    InformationsquelleAutor dude
  2. 2

    J'utiliserais postMessage. L'iframe peut attribuer son propre événement onload et poste pour la société mère. Si il y a des problèmes de timing assurez-vous de vous attribuer le parent postMessage gestionnaire d'avant la création de l'iframe.

    Pour que cela fonctionne, l'iframe devez connaître l'url de la mère, par exemple en passant un paramètre GET de l'iframe.

    • C'est exactement le genre de chose que je veux éviter, même si je suis d'accord que cela fonctionnerait.
    InformationsquelleAutor Adam Bergmark
  3. 1

    J'ai eu le même problème, dans mon cas, j'ai simplement vérifié si onload fonction est viré ou pas.

    var iframe = document.getElementById("someIframe");
var loadingStatus = true;
iframe.onload = function () {
loadingStatus = false;
//do whatever you want [in my case I wants to trigger postMessage]
};
if (loadingStatus)
//do whatever you want [in my case I wants to trigger postMessage]
    • Je suis sûr que cela ne fonctionnera pas si vous définissez le gestionnaire onload après l'iframe a été chargé, ce qui est le point de l'ensemble de l'OP.
    InformationsquelleAutor Mahyar Zarifkar
  4. 0

    J'ai essayé très dur pour arriver à une solution qui a travaillé de façon constante de la croix-navigateur. IMPORTANT: je n'ai pas pu arriver à une telle solution. Mais ici, c'est pour autant que je suis:

    //runs a function after an iframe node's content has loaded
//note, this almost certainly won't work for frames loaded from a different domain
//secondary note - this doesn't seem to work for chrome : (
//another note - doesn't seem to work for nodes created dynamically for some reason
function onReady(iframeNode, f) {
var windowDocument = iframeNode[0].contentWindow.document;
var iframeDocument = windowDocument?windowDocument : iframeNode[0].contentWindow.document;
if(iframeDocument.readyState === 'complete') {
f();
} else {
iframeNode.load(function() {
var i = setInterval(function() {
if(iframeDocument.readyState === 'complete') {
f();
clearInterval(i);
}
}, 10);
});
}
}

    et je l'utilise comme ceci:

    onReady($("#theIframe"), function() {
try {
var context = modal[0].contentWindow;
var i = setInterval(function() {
if(context.Utils !== undefined && context.$) { //this mess is to attempt to get it to work in firefox
context.$(function() {
var modalHeight = context.someInnerJavascript();
clearInterval(i);
});
}
}, 10);
} catch(e) { //ignore
console.log(e);
}
});

    Noter que même ce ne résout pas le problème pour moi. Voici quelques problèmes avec cette solution:

    • Dans onReady, pour des images qui ont été ajoutées dynamiquement, iframeDocument.readyState semble être bloqué à "non initialisé" et, donc, le rappel se déclenche jamais
    • L'ensemble de l'installation ne semble pas encore à l'œuvre dans firefox pour une raison quelconque. Il semble presque comme la fonction setInterval est effacé à l'extérieur.
    • Noter que certains de ces problèmes ne se produisent quand il y a beaucoup d'autres choses chargement de la page, ce qui rend le timing de ces choses de moins déterministe.

    Donc, si quelqu'un peut améliorer sur ce point, il serait très apprécié.

    • T Voir ma réponse
    InformationsquelleAutor B T
  5. -1

    Seulement lorsque le contenu à l'intérieur de l'iframe est chargé innerDoc est vrai et les feux de code à l'intérieur de la si.

        window.onload = function(){
function manipulateIframe(iframeId, callback) {
var iframe = document.getElementById(iframeId).contentWindow.document;
callback(iframe);
};
manipulateIframe('IFwinEdit_forms_dr4r3_forms_1371601293572', function (iframe) {
console.log(iframe.body);
});};

    exemple

    • Désolé, je viens de tester et cela déclenche avant l'iframe est fini de charger
    • Voulez-vous le contenu de à l'intérieur l'iframe à la fin du chargement de la première?
    • window.onload suppose que vous aussi, vous voulez attendre pour les images et autres iframes à l'intérieur de la fenêtre. Ce que nous voulons, c'est uniquement pour vérifier si spécifique de l'iframe a été chargé.
    • Afin de définir chargé. w/o des images, il est prêt. sinon, je suggère postMessage comme @Adam suggéré
    • Cela voudrait dire que l'on peut changer le contenu de l'iframe. Mais si par exemple je suis incorporation juste un iframe qui provient d'un tiers? Cela ne peut pas être la solution pour tous les cas.
    • Il ya une meilleure façon, voir ma réponse.

    InformationsquelleAutor raam86
  6. -1

    Je pense que vous devriez essayer d'utiliser onreadystatechange événement.

    http://jsfiddle.net/fk8fc/3/

    $(function () {
var innerDoc = ($("#if")[0].contentDocument) ? $("#if")[0].contentDocument :   $("#if")[0].contentWindow.document;
console.debug(innerDoc);
$("#if").load( function () { 
alert("load");
alert(innerDoc.readyState) 
});
innerDoc.onreadystatechange = function () {
alert(innerDoc.readyState) 
};
setTimeout(innerDoc.onreadystatechange, 5000);
});

    EDIT: le contexte n'est pas ce que je pense c'est. vous pouvez seulement de vérifier la readyState de iframe document et tout devrait bien se passer.

    OP: C'est un emballés fonction que j'ai faite à partir de concepts décrits ci-dessus:

    //runs a function after an iframe node's content has loaded
//note, this almost certainly won't work for frames loaded from a different domain
onReady: function(iframeNode, f) {
var windowDocument = iframeNode[0].contentWindow.document;
var iframeDocument = windowDocument?windowDocument : iframeNode[0].contentWindow.document
if(iframeDocument.readyState === 'complete') {
f();
} else {
iframeNode.load(f);
}
}
    • Ressemble à ceci devient vraiment proche, si loin, dans mes tests. J'ai eu à le faire fonctionner sous IE et Firefox. Chrome est criant à propos de l'origine de la politique de fichiers à la fois chargé à partir de mon système de fichier. Je vais tester avec un serveur web pour voir si ça fonctionne.
    • Pourquoi essayez-vous d'obtenir contentDocument et revenir à l'utilisation d'contentWindow.document . Pourquoi ne pas utiliser contentWindow.document à chaque fois?
    • C'est la suggestion de code pour obtenir iFrame document. Probablement à l'appui de vieux navigateur. Et aussi jQuery pourrait avoir une certaine coupe courte pour elle.
    • Ah gotcha. Pour info ce genre de choses travaillé lors du chargement à partir d'un serveur web. Merci encore!
    • Hey, donc en fait, en plus des tests, cela ne fonctionne pas, dans certains cas, pour les différents navigateurs. Cela me donne de bonnes idées, mais il y a un peu de problèmes avec cela.
    • Par exemple, sur chrome, l'état prêt est de remplir avant que la page soit totalement chargée.

    InformationsquelleAutor Onur Topal