Détection du chargement du contenu Iframe (Cross browser)

Question

Je suis en train d'essayer de détecter quand une iframe et son contenu ont chargé, mais ne pas avoir beaucoup de chance. Mon application prend en entrée dans les champs de texte dans la fenêtre parent et les mises à jour de l'iframe pour fournir un "live preview'

J'ai commencé avec le code suivant (YUI) pour détecter le moment où l'iframe charge événement se produit.

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

"aperçu du volet' est l'ID de mon iframe et je suis à l'aide de YUI pour joindre le gestionnaire d'événements. Cependant, en essayant d'accéder au corps à mon rappel (sur iframe charge) échoue, je pense que parce que l'iframe charge avant le gestionnaire d'événement est prêt. Ce code fonctionne si je le retard de l'iframe de chargement en faisant le script php qui génère le sommeil.

En gros, je me demande quelle est la bonne approche dans les navigateurs pour détecter le moment où l'iframe a chargé et son document est prêt?

Answer 1

pour détecter le moment où l'iframe a chargé et son document est prêt?

Il est idéal si vous pouvez obtenir de l'iframe pour vous dire lui-même à partir d'un script à l'intérieur du cadre. Par exemple, il pourrait appeler une fonction parent directement pour lui dire qu'il est prêt. Les soins sont toujours nécessaires avec la croix-cadre de l'exécution de code que les choses peuvent se produire dans un ordre que vous ne vous attendez pas. Une autre solution consiste à définir la var isready= true; " dans son propre champ d'application, et ont le script parent sniff pour ‘contentWindow.isready (et ajouter le gestionnaire onload si non).

Si, pour une raison quelconque, il n'est pas pratique d'avoir l'iframe document de coopérer, vous avez de l'traditionnelle de charge-course problème, à savoir que même si les éléments sont juste à côté les uns des autres:

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

il n'y a aucune garantie que l'élément ne sera pas déjà chargé par le temps, le script s'exécute.

Les moyens de sortir de charge sont des courses:

1. sur IE, vous pouvez utiliser la readyState la propriété pour voir si quelque chose est déjà chargé;

2. si l'article est disponible uniquement avec le JavaScript est acceptable, vous pouvez créer de manière dynamique, la définition de la ‘onload' événement de la fonction avant le réglage de la source et l'ajout de la page. Dans ce cas, il ne peut pas être chargé avant le rappel est défini;

3. old school, de l'inclure dans la balise:

   <img onload="callback(ce)" ... />

Inline ‘onsomething handlers en HTML sont presque toujours quelque chose de mal et à éviter, mais dans ce cas, il est parfois la moins mauvaise option.

Answer 2

Voir ce blog. Il utilise jQuery, mais il devrait vous aider même si vous ne l’utilisez pas.

En gros, vous ajoutez ceci à votre document.ready()

 $('iframe').load(function() {
    RunAfterIFrameLoaded();
});