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

J'essaie de détecter quand une iframe et son contenu se sont chargés mais je n'ai pas beaucoup de chance. Mon application prend certaines entrées dans les champs de texte de la fenêtre parent et met à jour l'iframe pour fournir un `` aperçu en direct ''

J'ai commencé avec le code suivant (YUI) pour détecter quand l'événement de chargement iframe se produit.

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

'preview-pane' est l'ID de mon iframe et j'utilise YUI pour attacher le gestionnaire d'événements. Cependant, essayer d'accéder au corps de mon rappel (lors du chargement de l'iframe) échoue, je pense que l'iframe se charge avant que le gestionnaire d'événements ne soit prêt. Ce code fonctionne si je retarde le chargement de l'iframe en mettant en veille le script php qui le génère.

Fondamentalement, je demande quelle est la bonne approche dans les navigateurs pour détecter quand l'iframe est chargé et que son document est prêt?

détecter quand l'iframe s'est chargé et que son document est prêt?

C'est idéal si vous pouvez faire en sorte que l'iframe vous dise à partir d'un script à l'intérieur du cadre. Par exemple, il pourrait appeler une fonction parent directement pour lui dire qu'elle est prête. Il faut toujours faire attention lors de l'exécution de code inter-cadres, car les choses peuvent se produire dans un ordre auquel vous ne vous attendez pas. Une autre alternative est de définir 'var isready = true;' dans sa propre portée, et faites renifler le script parent pour 'contentWindow.isready' (et ajoutez le gestionnaire onload si ce n'est pas le cas).

Si, pour une raison quelconque, il n'est pas pratique de faire coopérer le document iframe, vous avez le problème traditionnel de la course à la charge, à savoir que même si les éléments sont les uns à côté 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é au moment où le script s'exécute.

Les moyens de sortir des courses de charge sont:

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

2. si avoir l'élément disponible uniquement avec JavaScript activé est acceptable, vous pouvez le créer dynamiquement, en définissant la fonction d'événement 'onload' avant de définir la source et de l'ajouter à la page. Dans ce cas, il ne peut pas être chargé avant que le rappel ne soit défini;

3. la façon traditionnelle de l'inclure dans le balisage:

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

Les gestionnaires "onsomething" en ligne en HTML sont presque toujours la mauvaise chose et à éviter, mais dans ce cas, c'est parfois la moins mauvaise option.

Voir ce billet de blog. Il utilise jQuery, mais cela devrait vous aider même si vous ne l'utilisez pas.

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

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

Pour ceux qui utilisent React, la détection d'un événement de chargement iframe de même origine est aussi simple que de définir onLoadun écouteur d'événement sur l'élément iframe.

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

Pour toute personne utilisant Ember, cela devrait fonctionner comme prévu:

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />