Jquery gets iframe content height on load

Question

I have a help page, help.php, which I load inside the iframe in main.php How can I get the height of this page after loading it in the iframe?

I ask about this because I cannot create an iframe height of up to 100% or automatically. That is why I think I need to use javascript. I am using jQuery

CSS

body { margin: 0; padding: 0; } .container { width: 900px; height: 100%; margin: 0 auto; background: silver; } .help-div { display: none; width: 850px; height: 100%; position: absolute; top: 100px; background: orange; } #help-frame { width: 100%; height: auto; margin:0; padding:0; } 

JS:

 $(document).ready(function () { $("a.open-help").click(function () { $(".help-div").show(); return false; }) }) 

HTML:

 <div class='container'> <!-- --> <div class='help-div'> <p>This is a div with an iframe loading the help page</p> <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe> </div> <a class="open-help" href="#">open Help in iFrame</a> <p>hello world</p> <p>hello world</p> <p>hello world</p> <p>hello world</p> <p>hello world</p> </div> 

Answer 1

ok I finally found a good solution:

 $('iframe').load(function() { this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; }); 

Since some browsers (earlier versions of Safari and Opera) load before loading CSS, you need to set a micro timeout and cross out and reassign iframe src.

 $('iframe').load(function() { setTimeout(iResize, 50); // Safari and Opera need a kick-start. var iSource = document.getElementById('your-iframe-id').src; document.getElementById('your-iframe-id').src = ''; document.getElementById('your-iframe-id').src = iSource; }); function iResize() { document.getElementById('your-iframe-id').style.height = document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px'; } 

Answer 2

A less complicated answer is to use .contents() to access the iframe. It is interesting, however, that this returns a different value from what I get using the code in my original answer, because of the filling on the body, I believe.

 $('iframe').contents().height() + 'is the height' 

---

This is how I did it for cross-domain communication, so I'm afraid it might be unnecessarily complicated. First, I would put jQuery inside an iFrame document; this will consume more memory, but should not increase load time, since only the script needs to be loaded only once.

Use iFrame jQuery to measure the height of your iframe body as early as possible (onDOMReady), and then set the hash URL for that height. And in the parent document, add the onload to the iFrame tag, which will look at the iframe location and extract the desired value. Since onDOMReady will always occur before the document load event, you can be pretty sure that the value will be correctly transferred if the race condition does not complicate the situation.

In other words:

... in Help.php:

 var getDocumentHeight = function() { if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady location.hash = $('body').height(); // at this point the document address will be something like help.php#1552 } }; $(getDocumentHeight); 

... and in the parent document:

 var getIFrameHeight = function() { var iFrame = $('iframe')[0]; // this will return the DOM element var strHash = iFrame.contentDocument.location.hash; alert(strHash); // will return something like '#1552' }; $('iframe').bind('load', getIFrameHeight ); 

Answer 3

I found the following to work in Chrome, Firefox, and IE11:

 $('iframe').load(function () { $('iframe').height($('iframe').contents().height()); }); 

When the Iframes content is loaded, the event will fire and it will set the height of the IFrames according to its contents. This will only work for pages in the same domain as for the IFrame.

Answer 4

You do not need jquery inside the iframe, but I use it because the code is much simpler ...

Put this in the document inside your iframe.

 $(document).ready(function() { parent.set_size(this.body.offsetHeight + 5 + "px"); }); 

added five above to prevent scrolling on small windows, it is never perfect in size.

And this is inside your parent document.

 function set_size(ht) { $("#iframeId").css('height',ht); } 

Answer 5

The code for this without jQuery is now trivial:

 const frame = document.querySelector('iframe') function syncHeight() { this.style.height = `${this.contentWindow.document.body.offsetHeight}px` } frame.addEventListener('load', syncHeight) 

To cancel an event:

 frame.removeEventListener('load', syncHeight)