web-dev-qa-db-fra.com

Comment effacer le contenu d'un IFRAME?

Comment effacer le contenu de mon élément IFRAME, en utilisant javascript, sans y charger une page vierge?

Je peux comprendre pour ce faire: iframe_element.src = "blank.html", mais il doit y avoir une meilleure méthode instantanée.

javascripthtmliframe
60
sikender
about:blank

est une "URL" vide. C'est toujours clair

Vous pouvez définir la source de la page sur cela, et cela s'effacera.

96
McKay
var iframe = document.getElementById("myiframe");
var html = "";

iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

testé dans IE, Firefox et Chrome ... il l'a fait :)

13
Bogdan

Votre technique est la plus robuste. C'est celui que j'utilise moi-même. Parfois, le contenu peut être fourni via HTTPS et l'utilisation de about: blank peut entraîner l'apparition de messages d'avertissement indiquant "voulez-vous inclure du contenu provenant d'un emplacement non sécurisé" ou quelque chose de ce genre.

Quelque chose d'instantané est une question de perception, cependant si vous avez un seul fichier Blank.html sur votre site configuré avec une longue expiration de cache, le client ne récupérera la page qu'une seule fois (au plus une fois par session).

7
AnthonyWJones

Ou vous pouvez le faire:

var iframe_element = window.frames['iframe_name'];
iframe_element.document.open();
iframe_element.document.close();
3
Khalid

Vous pouvez également faire ceci:

<html>
<head>
<script>
    var doc = null;
    window.onload = function() {
        alert("Filling IFrame");
        doc = document.getElementById("test");

        if( doc.document ) {
            document.test.document.body.innerHTML = "<h1>test</h1>"; //Chrome, IE
        }else {
            doc.contentDocument.body.innerHTML = "<h1>test</h1>"; //FireFox
        }

            setTimeout(function() { 
                alert("Clearing IFrame");

                if( doc.document ) {
                    document.test.document.body.innerHTML = ""; //Chrome, IE
                }else {
                    doc.contentDocument.body.innerHTML = ""; //FireFox
                }

            }, 1000);
        };
    </script>
</head>

<body>
    <iframe id="test" name="test">

    </iframe>
</body>
</html>
2
Jared

J'ai rencontré des difficultés avec "about: blank" sur les pages contenant de nombreuses IFrames. Il ne semble pas être un emplacement valide dans tous les navigateurs (je ne l'ai jamais découvert avec certitude, cependant). Quoi qu'il en soit, je suis satisfait de javascript:void(0);

2
Pekka 웃

// D'abord, je récupère la fenêtre de son ID.

var my_content = document.getElementById('my_iframe').contentWindow.document;

// Ensuite, je l'efface en définissant la balise body HTML interne sur une chaîne vide.

my_content.body.innerHTML="";

// Maintenant, quand j'écris mon nouveau contenu, il n'est pas ajouté à la fin du corps et le corps iframe ne contiendra que du nouveau contenu.

my_content.write(new_content);
1
Keith