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.

• javascript
• jquery
• html
• iframe

Share Improve this question Follow edited Jul 20, 2017 at 14:39 Cœur 38.8k2525 gold badges206206 silver badges278278 bronze badges asked Aug 18, 2011 at 7:19 Undefined IdentityUndefined Identity 49533 gold badges77 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This 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?