remove HTML from inside iframe using Javascript, not jQuery

Question

I have an <iframe> that is added and removed from the stage as needed. Each time I add it, it needs to load a new page.

I need to get it to remove the previous contents so the frame is empty while the new page is loading.

Here is the code involved:

HTML:

<div id='overlay' class='overlay'></div> 
<div id="overlay_displayer_wrapper" class="overlay_displayer_wrapper">
    <div id='overlay_displayer' class='overlayDisplayer'>         
    <iframe id='i_displayer' class='i_displayer'></iframe>     
    </div>
</div>

This is the code that 'launches' the overlay and iframe above:

function launchDisplayer(img_src, base_directory, session_pics){
showDisplayer(true);
document.getElementById( 'i_displayer' ).setAttribute( 'src', '' );
document.getElementById("i_displayer").src="feeder.php?call=main&curr=" + img_src + "&dir=" + base_directory + "&pics=" + session_pics;
}

This is the function showDisplayer():

function showDisplayer(show){
var overlay = document.getElementById("overlay");
var overlay_displayer = document.getElementById("overlay_displayer_wrapper");
if (show){
    overlay.style.display = "block";
    overlay_displayer.style.display = "block";
}else{
    overlay.style.display = "none";
    overlay_displayer.style.display = "none";

}
}

That's all the code involved in this action.

ThinkingStiff · Accepted Answer · 2012-01-14 09:28:21Z

1

Just clear the src.

Demo: http://jsfiddle.net/ThinkingStiff/9ZrMZ/

HTML:

<iframe id="myframe" src="http://thinkingstiff.com"></iframe>

Script:

document.getElementById( 'myframe' ).setAttribute( 'src', '' );

answered Jan 14, 2012 at 9:28

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ThinkingStiff Over a year ago

@LeeLoftiss What didn't work about it? Look at the demo. It does clear the iframe.

Lee Loftiss Over a year ago

The contents are not clearing out like they do in your demo. Do you think adding and removing the iFrame through the style.display setting could be effecting it? Here is the project that is using it: projects.kleelof.com/shrinking_sensation/index.php

ThinkingStiff Over a year ago

@LeeLoftiss I can't quite figure out from that link. Can you add the relevant code to your question?

ThinkingStiff Over a year ago

Try adding window.setTimeout( function () { /* your .src="feeder.php call goes here */ }, 3000 ); around your ... .src="feeder.php ... call just to see if it's a timing issue.

Collectives™ on Stack Overflow

remove HTML from inside iframe using Javascript, not jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related