Maison >interface Web >js tutoriel >**Comment déterminer de manière fiable si un iFrame est chargé et contient du contenu ?**

**Comment déterminer de manière fiable si un iFrame est chargé et contient du contenu ?**

DDD
DDDoriginal
2024-10-24 21:48:03795parcourir

**How to Reliably Determine if an iFrame Has Loaded and Contains Content?**

Détermination de l'état de chargement de l'iFrame pour la détection de contenu

Dans le développement Web, il est souvent nécessaire de charger dynamiquement du contenu dans un iFrame. Pour garantir un bon fonctionnement et éviter des erreurs potentielles, il est crucial de déterminer quand l'iFrame a été chargé avec succès et contient du contenu.

Problème :

Considérez un iFrame avec un chargement variable temps. Vous avez besoin d'un moyen de détecter si l'iFrame a fini de charger ou acquis du contenu. Des approches telles que iframe.contents().find() ou iframe.load(function()) ne sont pas toujours réalisables.

Solution :

Voici un code JavaScript fonction qui vérifie efficacement l'état chargé d'un iFrame :

<code class="javascript">function checkIframeLoaded() {
    // Get iframe reference
    var iframe = document.getElementById('i_frame');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check if loading is complete
    if (iframeDoc.readyState == 'complete') {
        // Loading is complete
        afterLoading();
        return;
    } 

    // Set timeout for re-checking
    window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading(){
    // Execute desired code after iFrame load
}</code>

Dans le fichier de votre document HTML, ajoutez ce qui suit :

<code class="html"><body onload="checkIframeLoaded();"></code>

Cette fonction vérifie périodiquement la propriété readyState de l'iFrame, qui indique son état de chargement. Lorsque readyState est égal à « complete », l'iFrame est chargé et vous pouvez exécuter n'importe quel code souhaité via la fonction afterLoading().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn