5

Inside the iframe I need to figure out what exactly is the visual size(using js or jquery).

In this example, only the part of an iframe is shown. Iframe size is 300x300 but the div will limit it to 300x100.

<div style="max-width: 300px; max-height: 100px; overflow: hidden">
<iframe width="300" height="300" src="http://www.rapidtables.com/web/tools/window-size.htm" style="border:none"></iframe>
</div>

How can i detect that actual visible dimensions from inside the iframe?

Tried

window.clientHeight
window.outerHeight
window.innerHeight
window.availableHeight
$(window).height();
Milos
  • 2,927
  • 1
  • 15
  • 27
  • 1
    I think this will help you: http://stackoverflow.com/questions/5087278/how-to-get-the-height-of-an-iframe-with-javascript-from-inside-the-iframe-what – Sander May 19 '15 at 10:42
  • 1
    No. That will give me the size of an iframe, i don need that. As you can see only the part of the iframe is shown. I need that part. – Milos May 19 '15 at 10:48
  • did you look here ? https://stackoverflow.com/questions/735072/how-can-i-get-a-parent-windows-height-from-within-iframe-using-jquery. "parent.document.body.clientHeight" – Federico Jan 20 '20 at 11:34

1 Answers1

0

First add an ID to the iframe:

<div style="max-width: 300px; max-height: 100px; overflow: hidden">
<iframe id="myIframe"width="300" height="300" src="http://www.rapidtables.com/web/tools/window-size.htm" style="border:none"></iframe>
</div>

then with jQuery get the iframe contents real height;

$('#myIframe').contents().find('body').height()
alabusa
  • 44
  • 4
  • 1
    .height() is mentioned in the question. Only the visible part of the iframe is needed. – Milos Jan 22 '20 at 13:31