| 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.
|
|
| Home |
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> </span> |
| 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> <p>page.</p> </span> <script> // - this is the script in the iframe results page var reps = document.getElementById('state_reps').innerHTML; parent.document.getElementById('results1').innerHTML = reps; </script> |