StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO<iframe> - How to show the whole height of referenced page?
text
Body
copied!<p>I have an application that I would like to embed inside our companies CMS. The only way to do that (I am told), is to load it in an <code><iframe></code>.</p> <p>Easy: just set <code>height</code> and <code>width</code> to <code>100%</code>! Except, it doesn't work.</p> <p>I did find out about setting <code>frameborder</code> to <code>0</code>, so it at least <em>looks</em> like part of the site, but I'd prefer not to have an ugly scrollbar <em>inside</em> a page that allready has one.</p> <p>Do you know of any tricks to do this?</p> <p><strong>EDIT:</strong> I think I need to clarify my question somewhat:</p> <ul> <li>the company CMS displays the fluff and stuff for our whole website</li> <li>most pages created through the CMS</li> <li>my application isn't, but they will let me embedd it in an <code><iframe></code></li> <li>I have no control over the <code>iframe</code>, so any solution must work from the referenced page (according to the <code>src</code> attribute of the <code>iframe</code> tag)</li> <li>the CMS displays a footer, so setting the height to 1 million pixels is not a good idea</li> </ul> <p>Can I access the parent pages DOM from the referenced page? This might help, but I can see some people might not want this to be possible...</p> <p>This technique seems to work (<a href="http://bytes.com/forum/thread91876.html" rel="noreferrer">gleaned</a> from several sources, but inspired by the <a href="http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe" rel="noreferrer">link</a> from the accepted answer:</p> <p>In parent document:</p> <pre><code><iframe id="MyIFRAME" name="MyIFRAME" src="http://localhost/child.html" scrolling="auto" width="100%" frameborder="0"> no iframes supported... </iframe> </code></pre> <p>In child:</p> <pre><code> <body> <script type="text/javascript"> function resizeIframe() { var docHeight; if (typeof document.height != 'undefined') { docHeight = document.height; } else if (document.compatMode && document.compatMode != 'BackCompat') { docHeight = document.documentElement.scrollHeight; } else if (document.body && typeof document.body.scrollHeight != 'undefined') { docHeight = document.body.scrollHeight; } // magic number: suppress generation of scrollbars... docHeight += 20; parent.document.getElementById('MyIFRAME').style.height = docHeight + "px"; } parent.document.getElementById('MyIFRAME').onload = resizeIframe; parent.window.onresize = resizeIframe; </script> </body> </code></pre> <p><strong>BTW:</strong> This will only work if parent and child are in the same domain due to a restriction in JavaScript for security reasons...</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload