How to clear the content of an IFRAME

Question

jgivoni

How to clear the content of an IFRAME

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.

Thanks,
Jakob

Status: Open Jul 12, 2006 - 02:49 PM

iframe, web development, JavaScript

Comments (0) | New Comment

Do you have the same question? Follow this Question

Answer this question Report it

7answers

Answers

rcastagna

Jul 12, 2006 - 03:53 PM

Jakob...

You could always set the style display: none to it...it wouldn't actually "clear" the iframe, but it would hide it from view.

document.getElementById(iframe).style.display = none; should do the trick...

Past that, loading the iframe with a blank document would be about the only way to "clear" it out.

Ric

0

Report it

Comments (0) | New Comment

theDude

Aug 24, 2006 - 11:21 PM

Jakob, did you find a solution to this?
Here's another possibility:
If "windowRef" is a reference to the window object of the frame you want
to close, then
windowRef.document.open();
windowRef.document.close();
should do it.

0

Report it

Comments (0) | New Comment

jgivoni

Sep 03, 2006 - 11:59 AM

Ok, theDude,

so if I have

and
<br>x = document.getElementById("iframetest"); <br>[...] <br>

how do I get the reference to the window object of that iframe in order to clear it with the "open/close" sequence?

0

Report it

Comments (0) | New Comment

jgivoni

Sep 06, 2006 - 11:11 AM

I have actually found the answer myself in the mean time.

First, give the iframe a name attribute instead of the id:

Then access it in javascript like this:

x = window.frames["iframetest"];
(Or in IE just like this: x = iframetest)

Then you can do like theDude suggests:

x.document.open();
x.document.close();

But this more simple method also works:

x.document.body.innerHTML = "";

These solutions have been tested in Firefox 1.5 and Internet Explorer 6.

0

Report it

Comments (0) | New Comment

munatapu

Sep 14, 2014 - 10:31 AM

You could use a link..
<a href="about:blank" rel="nofollow"
target="frame">clear</a>
edit:/ oh you want to edit an iframes content.
ermmm... i know how to do this.
er like try
<iframe id="box" blah></iframe>
var boxy = getElementsById("box");
boxy.document.value = textareaname.value;

0

Report it

Comments (0) | New Comment

iajua55

Feb 01, 2015 - 02:59 PM

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

`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 didit :)

0

Report it

Comments (0) | New Comment

RuskinF

Jan 23, 2020 - 12:36 AM

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>

I hope this helps!
Ruskin | Admin
Apps4Rent | o365cloudexperts

Source: IFRAME

1

0

Report it

Comments (0) | New Comment

Answer this question

Share Your Own Experience & Expertise

We look to ensure that every question is answered by the best people with relevant expertise and experience, the best answers include multiple perspectives. Do you have relevant expertise or experience to contribute your answer to any of these commonly asked questions?

How to clear the content of an IFRAME

7answers

Answers

Share Your Own Experience & Expertise

About Quomon

Browse by Topic

Recently Active Members

Tools