0

While rendering iframes, I use the code:

ifrm = document.createElement("IFRAME");
ifrm.style.width = "100%";
ifrm.style.height = 600+"px";
function makeFrame() {
document.body.appendChild(ifrm);
}

However, this keeps appending iframes below the existing one, each time I call the function makeFrame(). So, if I call makeFrame() (say thrice), then I get three iframes one below the previous. How to prevent this and replace the existing one instead of appending to the last one?

3 Answers 3

0

The simplest answer:

If you want to change your code as little as possible, and you're certain that you'll only have exactly one iframe on the page at any given time

function makeFrame() {
oldiframe = document.getElementsByTagName("IFRAME")[0] 
// getElementsByTagName will return an array (a list). 
// Adding [0] will return the first (and, under our assumptions, only) element
ifrm = document.createElement("IFRAME");
ifrm.style.width = "100%";
ifrm.style.height = 600+"px";
document.body.replaceChild(ifrm, oldiframe);
}
4
  • Do you mean using replaceChild instead of appendChild?? I tried using that code you provided but it doesn't create any iframe?? Am I missing something?? Thanks.
    – saikat
    Jan 11, 2013 at 15:24
  • Ah, your problem has to do with variable scope. The tl;dr of it is your function doesn't know about your oldiframe and ifrm. The problem is solved if you move everything inside of makeFrame. I've edited my original answer to reflect this.
    – mikemxm
    Jan 11, 2013 at 17:03
  • Quick FYI: if you want to set the url of the new iframe's contents you can use, for example, ifrm.setAttribute("src","blue.html"); You should be aware that if you try to put external sites in iframes (e.g. src="http://www.google.com") you may run into trouble. The external server may have safeguards in place to prevent you (for reasons of user security / ad revenue / bandwidth).
    – mikemxm
    Jan 11, 2013 at 17:10
  • Hi @mike, thanks a ton for the reply. That code of yours helped a lot and you can see the final working code as I put it down in the answer section. Also, thanks for the warning against iframes. Do you know of any better way/technology to render content from external websites without any issues? Can there be any copyright issues? Thanks.
    – saikat
    Jan 12, 2013 at 5:34
0

Create a div . Let's say div id is iframecontainer so your code should be like:

<div id="iframecontainer">
<!-- Iframe goes here -->

</div>

Now simply getElementById with javascript and set the innerHTML to "" before appending the iframe.

0

Hi @mikemxm I was finally able to solve the problem. The final code looks like this:

oldiframe = document.getElementsByTagName("IFRAME")[0]; 
ifrm = document.createElement("IFRAME");
ifrm.style.width = "100%";
ifrm.style.height = 600+"px";
function makeFrame() {
   if(oldiframe == null)
     document.body.appendChild(ifrm);
   else
     document.body.replaceChild(ifrm, oldiframe);
}

And thanks for the warning against iframes. Do you know of any better way/technology to render content from external websites? Can there be any copyright issues? Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.