.append() Iframe IE Problem

.append() Iframe IE Problem

Hi

Perhaps this is a bug, but I cannot access an outer document from an iframe with jquery.

here a very simple example:

top document:
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <iframe src="test2.html" id="UserIFrame" name="UserIFrame">
  6. </body>
  7. </html>
and child iframe:

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="styles/genevadesign_jquery-1.4.1.js"></script>
  4. <script type="text/javascript">
     function doit(){
        $('body',top.document).append($('#progressBG'));
        $('body',top.document).append($('#progress'));
        $('#progressBG',top.document).fadeIn(300);
        $('#progress',top.document).fadeIn(300);
    }
    </script>






  5. </head>
    <body>
  6. <div id="progressBG" style="background-color:gray;height:100%;left:0;opacity:0.6;filter:alpha(opacity=60);overflow:hidden;position:fixed;top:0;vertical-align:middle;width:100%;z-index:998;display:none;"><iframe style="z-index: 990;position:fixed;height:100%;width:100%;left:0px;top:0px;display:block;filter:alpha(opacity=0);" id="popupProgress" src="javascript:'';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe></div>
  7. <div id="progress" style="background-color:transparent;height:129px;left:50%;margin-left:-205px;margin-top:-65px;position:fixed;text-align:center;top:50%;vertical-align:middle;width:410px;z-index:999;display: none;">
        <table style="width: 100%;margin-top: 30px;text-align: center;font-size:14px;font-weight:bold;font-family:Arial,Helvetica,sans-serif;color:#003399;">
        <tr><td style="font-size: 16px; padding-top: 5px;">hey apple! hey... hey! hey apple! apple, hey!!</td></tr>
        <tr><td style="padding-top: 15px;"><img src="/images/transaction_grey.gif"/></td></tr>
        </table>
    </div>




  8. <input type="button" onclick="doit();"/>
  9. </body>
  10. </html>
As you can see, I try to access the top document from the inner frame like this:

$(SELECTOR, top.document).append(ANOTHER ELEMENT);

But this does not work in IE "Invalid Argument". It works within the same document, but as soon as I refer another document it stops working.

Perhaps someone knows about or perhaps I should report a bug.

PS. I work with IE7