Javascript! IE document ready state

Question

Im not big javascript guru so i would be glad if someone could help me with this. Ok so what i wish to do is to display simple indicator for file download while files will prepared. Now everything works perfectly in Firefox but not in IE loader will be created by php and download comes through iframe. Now as you can see from code below i checked for document ready state and for some reason it stays interactive for IE and never completes but in Firefox in completes nicely.

if($_POST['download'])
{
    echo '<iframe id="frame" src ="download.php?data='.$_POST['download'].'" width="0" height="0" frameborder="0" scrolling="no"></iframe>';

    echo '<div id="loader">';
    echo '<div id="loading-container"><p id="loading-content">Please wait while we prepare your files<img id="loading-graphic" width="220" height="19" src="images/indicator.gif" /></p></div>';
    echo '</div>';
    echo '<script type="text/javascript">

    var wooIntervalId = 0;
    var i = 0;
    function startInterval()
    {
        wooIntervalId = setInterval(doSomething, 1000);
    }

    function doSomething()
    {   
        document.getElementById("loading-content").innerHTML = document.readyState + i;
        i++;
    }

    function remove_elem()
    {
        element = document.getElementById("loader");
        element.parentNode.removeChild(element);
    }

    startInterval();

    </script>';
}

I really liked solution for removing indicator like this cause in firefox it removes indicator right after save file dialog is displayed but in IE it dosen't just work.

window.onload = function()
    {
        element = document.getElementById("loader");
        element.parentNode.removeChild(element);
    }

Anny suggestions?

Ok heres script which works in IE and in Firefox. Basically i need to check iframes ready state which turns "NaN" in Firefox and firstly to "loading" in IE and to "interactive" on complete(IE) So i create startingState with value "loading" to work it in both browser cause IE changes it's state twice and Firefox only once. In Chrome and Opera iframe ready state turns to "undefined" and will do it only once so if anyone has fix for that it would be also great.

<script type="text/javascript">
    var startingState = "loading";
    var wooIntervalId = 0;
    function startInterval()
    {
        wooIntervalId = setInterval(doSomething, 1000);
    }

    function doSomething()
    {   
        var doc=document.getElementById("frame");
        if(startingState != doc.readyState)
        {
            remove_elem();
            clearInterval(wooIntervalId);
        }
    }

    function remove_elem()
    {
        element = document.getElementById("loader");
        element.parentNode.removeChild(element);
    }
    startInterval();
    </script>';

Answer 1

UPDATE:

Use messaging - MSDN - MDN - to safely communicate cross domain/crossframes from a page on your server to another page on another of your servers

How about this

<?PHP if (isSet($_POST['download'])) { ?>
  $url = "download.php?data=".htmlentities($_POST['download']);
  <iframe id="frame" src ="<?PHP echo $url; ?>" width="0" height="0" frameborder="0" scrolling="no" onload="remove_elem('loader')"></iframe>
  <div id="loader">;
    <div id="loading-container"><p id="loading-content">Please wait while we prepare your files<img id="loading-graphic" width="220" height="19" src="images/indicator.gif" /></p></div>
  </div>';
  <script type="text/javascript">
    var wooIntervalId = 0;
    var i = 0;
    function startInterval() {
      wooIntervalId = setInterval(doSomething, 1000);
    }

    function doSomething() {   
      document.getElementById("loading-content").innerHTML = document.readyState + i;
      i++;
    }

    function remove_elem(elemId) {
      var element = document.getElementById(elemId);
      element.parentNode.removeChild(element);
    }

    startInterval();

    </script>
<?PHP } ?>