Using iframe and innerHTML
to Moving Data From an iframe to the Parent

Iframe can load a new content page. But changing the iframe height is not easy. If the new content page is long, there will be vertical scroll bar for the iframe. It does not look good and not easy to manager two vertical scroll bars; one for the entire web page and another for the iframe.

Following sample using iframe to load new content, then dump the new content to the parent page as regular text by innerHTML. The new content is part of the page. If the page is long, there is only one vertical scroll bar.

I make the iframe size very small, so it is invisible.



Load Iframe

Change Content

 This is home. Click on Load Iframe, it does two things,
1. load iframe
2. replace the content of iframe into the content section

Click on Change Content, the content changes to another innerHtml text.


Content ------


iframe is below and invisible.

Parent Code <span id="results1">
<p><b>Content ------</b></p>
iFrame code <span id="state_reps">
<p>This is iFrame content. It is a long long text file.</p>
<p>Better be invisible in Iframe, by visible in the parent</p>

// - this is the script in the iframe results page
var reps = document.getElementById('state_reps').innerHTML;
parent.document.getElementById('results1').innerHTML = reps;