I have an iframe, whose content points to an HTML document.
In that HTML document, there's an EMBED element pointing to a PDF document. This EMBED originally set up with width and height in PERCENTAGE (such as: width: 100%; height: 100%).
My question is:
After the iframe has been loaded, how can I retrieve the actual, absolute width and height (in any unit px, pt, em etc.) of the EMBED element.
I've been trying on all possible js properties (width, height, style: clientWidth, clientHeight, offsetWidth, offsetHeight...) and in jQuery as well (such as outerWidth, outerHeight etc.) but it seems hopeless.
I have an iframe, whose content points to an HTML document.
In that HTML document, there's an EMBED element pointing to a PDF document. This EMBED originally set up with width and height in PERCENTAGE (such as: width: 100%; height: 100%).
My question is:
After the iframe has been loaded, how can I retrieve the actual, absolute width and height (in any unit px, pt, em etc.) of the EMBED element.
I've been trying on all possible js properties (width, height, style: clientWidth, clientHeight, offsetWidth, offsetHeight...) and in jQuery as well (such as outerWidth, outerHeight etc.) but it seems hopeless.
Share Improve this question edited Jul 20, 2017 at 14:39 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked Aug 18, 2011 at 7:19 Undefined IdentityUndefined Identity 4953 gold badges7 silver badges17 bronze badges3 Answers
Reset to default 3This should return what you need:
document.getElementById("id").clientHeight
document.getElementById("id").clientWidth
id is a unique ID of the EMBED element.
For more about this:
https://developer.mozilla/en/DOM:element.clientHeight
https://developer.mozilla/en/DOM:element.clientWidth
http://jsfiddle/purmou/9XXwf/2/
This uses jQuery's width() and height(). Currently it finds the total width/height of an object, including padding, border, margins, etc. If you'd like to find the width and height of the element itself, excluding the the borders, etc., replace var width = this.offsetWidth; with var width = $(this).width(); and var height = this.offsetHeight; with var height = $(this).height();.
You should use the .offsetWidth and .offsetHeight properties. Note! they belong to the element, not element.style.
var width = document.getElementById('foo').offsetWidth;
It works in all modern browsers. But beware! offsetWidth/offsetHeight can return 0 if you've done certain DOM modifications to the element recently. You may have to call this code in a setTimeout call after you've modified the element. Maybe that was your issue?