How to clear the content of an IFRAME?

Question

How do I clear the content of my IFRAME element, using javascript, without loading a blank page into it?

I can figure out to do this: iframe_element.src = "blank.html", but there must be a better, instant, method.

McKay · Accepted Answer · 2009-11-23T18:43:08.763

115

about:blank

is a "URL" that is blank. It's always clear

You can set the page's source to that, and it will clear.

edited Nov 23 '09 at 18:43

answered Nov 23 '09 at 18:27

McKay

12,334
7
53
76

20

iframe_element.src = "about:blank" – victor hugo Nov 23 '09 at 18:38
doing document.getElementByid("frame_name").src = about:blank caused the app to open a new blank page/tab when src = about:blank – z atef Mar 03 '17 at 04:44
1

@zee yes, but you can use document.querySelector(".frame_name").contentWindow.location.replace(`about:blank`); and works like a charm! – danivicario Mar 28 '20 at 19:31

score 19 · Answer 2 · edited Mar 30 '16 at 12:00

19

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

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

tested in IE, Firefox and Chrome ... it did it :)

edited Mar 30 '16 at 12:00

robsch

9,358
9
63
104

answered Dec 03 '13 at 18:21

Bogdan

191
1
2

Simple... best approach in my opinion. I'm not using an iframe with a src attribute and so I'd rather not add a src attribute of "about:blank". I'm loading and clearing my iframe based on HTML data saved in a variable and so this was absolutely perfect. – Code Novice Apr 13 '21 at 18:25
Just fyi, this doesn't clear JS global scope. – luiscla27 Jul 28 '23 at 16:35

score 8 · Answer 3 · answered Nov 23 '09 at 18:35

Your technique is the most robust. Its the one I use myself. At times content may be delivered over HTTPS and the use of about:blank can cause warning messages to appear to the effect of "do you want to include content from unsecure location" or some such thing.

Something being instant is a matter of perception however if you have a single Blank.html file on your site configured with a long cache expiry the client will only ever fetch the page once (at the most once per-session).

score 3 · Answer 4 · answered May 19 '11 at 08:41

3

Or you can do this :

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

answered May 19 '11 at 08:41

Khalid

31
1

You can also write to the document while it is open, if you want to add a basic message (or what ever) to the window. – Trisped Aug 09 '12 at 01:04

score 2 · Answer 5 · answered Nov 23 '09 at 18:32

2

I have had difficulties with "about:blank" on pages with many IFrames. It does not seem to be a valid location in every browser (I never found out for sure, though). Anyway, I am happy with javascript:void(0);

answered Nov 23 '09 at 18:32

Pekka

442,112
142
972
1,088

what happens if Javascript is disabled? – AnthonyWJones Nov 23 '09 at 18:36
He is specifically asking how to reset a IFrame location after Javascript. While I imagine that javascript: urls gracefully downgrade, I don't know for sure. – Pekka Nov 23 '09 at 18:41

score 2 · Answer 6 · answered Nov 23 '09 at 19:53

You could also do this:

<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>

score 2 · Answer 7 · answered Feb 13 '17 at 08:42

2

// First I get the window from its Id.

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

// Then I clear it by setting the body tag inner HTML to an empty string.

my_content.body.innerHTML="";

// Now when I write my new content it does not get appended to the end of the body and the iframe body will contain only fresh content.

my_content.write(new_content);

answered Feb 13 '17 at 08:42

Keith

49
5

Just a note for others who are scanning for answers: This does not work if you have an applications with multiple iframes... some of which are not visible. Removing the `src` attribute does work though. – Lucretius May 24 '22 at 19:35

score 0 · Answer 8 · edited Aug 02 '21 at 16:46

0

Just do it:

var iframe = document.getElementById("iframe");
iframe.removeAttribute('srcdoc');

Work in Chrome

edited Aug 02 '21 at 16:46

Mario Petrovic

7,500
14
42
62

answered Aug 02 '21 at 16:02

Isaque Simiao

1
1

Im afraid this does not answer the question – Aziza Kasenova Aug 02 '21 at 16:46

score -1 · Answer 9 · answered Jun 08 '16 at 06:52

Just get the Iframe and remove the documentElement from it. The Iframe will be blank

 var frame = document.getElementById("YourFrameId"),
 frameDoc = frame.contentDocument || frame.contentWindow.document;
 frameDoc.removeChild(frameDoc.documentElement);

score -2 · Answer 10 · edited Jan 04 '17 at 16:40

-2

function getContentFromIframe(iFrameName)
{
    var myIFrame = document.getElementById(iFrameName);
    var content = myIFrame.contentWindow.document.body.innerHTML;

    //Do whatever you need with the content    
}

edited Jan 04 '17 at 16:40

TheLethalCoder

6,668
6
34
69

answered Mar 12 '13 at 04:58

Frank James

157
2
5
15

score -4 · Answer 11 · answered Aug 11 '13 at 06:45

-4

$("#iframe").contents().find("body").html('');

answered Aug 11 '13 at 06:45

techknowfreak

259
4
18

1

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – Peter L. Aug 11 '13 at 07:04
You would also only be able to modify the contents of an iframe if it was originally loaded from the same domain as the containing page. – Tian van Heerden Nov 22 '15 at 09:04
1

@PeterL. Although I agree that this answer is too terse to be useful, it does, technically, answer the OP, since `jQuery` _is_ `JavaScript`. – Jesse Chisholm Jun 21 '16 at 15:51

How to clear the content of an IFRAME?

11 Answers11

Linked