"Alert" and "if" changes behaviour of dom copying from iframe to div

Question

Hi guys! Tried to make a little old school ajax (iframe-javascript) script. A bit of mootools is used for DOM navigation

Description:

HTML:

1 iframe called "buffer"

1 div called "display"

JAVASCRIPT: (short: copy iframe content into a div on the page)

1) onLoad on iframe triggers handler(), a counter makes sure it only run once (this is because otherwise firefox will go into feedback loop. What i think happens: iframe on load > handler() > copyBuffer > change src of iframe , and firefox takes that as an onload again)

2) copybuffer() is called, it sets src of iframe then copies iframe content into div, then erases iframe content

THE CODE:

---

count=0;
function handler(){

if (count==0){
copyBuffer();
count++;
}

}

function copyBuffer(){


$('buffer').set('src','http://www.somelink.com/');

if (window.frames['buffer'] && $('display') ) { 

$('display').innerHTML = window.frames['buffer'].document.body.innerHTML;
window.frames['buffer'].document.body.innerHTML="";
}

}

---

problems:

QUESTION 1) nothing happens, the content is not loaded into the div. But if i either:

A) remove the counter and let the script run in a feedback loop: the content is suddenly copied into the div, but off course there is a feedback loop going on, you can see it keeps loading in the status bar.

OR

B) insert an alert in the copyBuffer function. The content is copied, without the feedback loop.

why does this happen?

QUESTION 2) The If wrapped around the copying code i got from a source on the internet. I am not sure what it does? If i remove it the code does not work in: Safari and Chrome.

Many thanks in advance!

---

UPDATE:

Like the answers said i have created an event handler. They used jQuery, i have made one in mootools:

window.addEvent('domready', function() {

    $('buffer').addEvent('load', function(){

        $('display').set('html',window.frames['buffer'].document.body.innerHTML) 
        window.frames['buffer'].document.body.innerHTML="";

    }).set('src','somelink');

});

Bonus question:

3) Im new at stackoverflow (what an amazing place!), is it better if i make new threads for follow up questions?

Answer 1

The iframe has not loaded the page when you try to access it, so it cannot get the contents..

I believe the following would work, by adding a load handler on the iframe and do the copy inside that..

function handler(){
   $('buffer').load( function(){copyBuffer();} ).attr('src','http://www.somelink.com/');
}

function copyBuffer(){
   if (window.frames['buffer'] && $('display') ) 
    { 
       $('display').innerHTML = window.frames['buffer'].document.body.innerHTML;
       window.frames['buffer'].document.body.innerHTML="";
    }
}

Answer 2

B) insert an alert in the copyBuffer function. The content is copied, without the feedback loop.

According to your description there is some sort of delay needed for your code to execute correctly and alert just gives the delay needed.
To be more precise, it seems to me that timespan between $('buffer').set('src','http://www.somelink.com/'); and $('display').innerHTML = window.frames['buffer'].document.body.innerHTML; is not long enough for the buffer to get its source loaded completely.

You should think about handling appropriate event in order to be sure that everything has already been loaded before your code fires.

For instance, you can rewrite your code in the following way:

function handler(){    
    $('buffer').load( function(){
        if (count==0){
            copyBuffer();
            count++;
        }
    }).attr('src','http://www.somelink.com/');    
}

function copyBuffer(){

    //$('buffer').set('src','http://www.somelink.com/');

    if (window.frames['buffer'] && $('display') ){    
        $('display').innerHTML = window.frames['buffer'].document.body.innerHTML;
        window.frames['buffer'].document.body.innerHTML="";
    }    
}