Remote Scripting - Targeting a Hidden iframe

for IE 5+ and Netscape 6+

While targeting an iframe is a simple enough procedure, targeting a hidden frame is not as straight forward as it may seem. There are 2 possible ways of targeting an iframe but only one of those ways will work with both IE and Netscape.

Targeting iframes

You have a form in one page and you want the response to load in another page. How to do it? It's this simple : give your iframe a name attribute and then, in the opening form tag, add a target attribute that uses the iframe's name as its value.

  <iframe name="myIframe" src="blank.html"></iframe>
  

  <form name="myForm" action="/servlet/myServlet" method="post" target="myIframe">
      <!-- Form contents here -->
  </form>

This is identical to the way you would target a frame in a frameset.

Hiding the iframe

I know, this sounds like a no-brainer - just put style="display:none" in the opening iframe tag. Well, that will only work with IE. As far as Netscape is concerned, once you've set an iframe's display style to none, its contents are inaccessible.

The only way to hide an iframe that allows both browsers access its content is like this:

<iframe name="myIframe" src="blank.html" style="width:0px;height:0px" frameborder="0">
</iframe>

There's an easy way to test this. In the iframe below we'll load a page that contains a javascript alert. Next, we'll change the style of the iframe to display:none and then reload the alert page.

In IE, you'll see the alert both times. In Netscape, you'll only see the first alert.

<script>
function hideIframe(){
 document.getElementById('testIframe').src='blank.html';
 document.getElementById('testIframe').style.width='0px';
 document.getElementById('testIframe').style.height='0px';
 document.getElementById('testIframe').style.display='';
}
</script>

Moving Data From an iframe to the Parent >>