How to grab height of object tag content

Question

I just need to get the height of the content of an object tag when assuming the object is a webpage(on the same site.)

I appreciate any help in advance.

Thanks guys! I know there's a way to do it.

EDIT

<object id="blogs-and-stuff" data="blog/index.php" class="blog-stuff" type="text/html" style="width:900px; margin-left:50%;">

I want the height of index.php in the preceeding, not the height of ".blog-stuff".

$(".blog-stuff").height() //does not return what I need. 

EDIT EDIT

Im trying to grab the height of the webpage inside the object tag and apply it to the object tag. This would increase the size of the object to show the entire webpage its holding rather than using scroll bars. Overflow is not working as planned. This screen shot shows only the object with the webpage in it

Sorry for the confusion guys.

Answer 1

Access the content of Object

The real challenge seem to be how to access the content of the Object element. The solution I found is to use the contentDocument property of the object element. I put together a small test case where you log the height of the object content.

document.getElementById("object_id").contentDocument.body

Make sure the object content is loaded before you try and access its height.

<object id="test" data="test.html" ></object>
<button id="button">Log height</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $("#button").click(function() {
         console.log(document.getElementById("test").contentDocument.body.getBoundingClientRect().height)
    });
</script>

However, you will run into problem if try to load an external URL in your object. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

---

Then there are a few different methods that will get the height of an HTML element.

Pure JavaScript options:

element.style.height

document.getElementById("input_id_here").style.height;

Description:

The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

https://developer.mozilla.org/en-US/docs/Web/CSS/height

element.getBoundingClientRect().height

element.getBoundingClientRect().height

Description:

Returns a text rectangle object that encloses a group of text rectangles.

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

element.clientHeight

element.clientHeight;

Description:

Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

HTMLelement.offsetHeight

document.getElementById("input_id_here").offsetHeight;

Description:

Height of an element relative to the element's offsetParent.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

jQuery options

*height("input_selector_here")*

$("input_selector_here").height()

Description:

Get the current computed height for the first element in the set of matched elements.

https://api.jquery.com/height/

outerHeight()

$("input_selector_here").outerHeight()

Description:

Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns a number (without "px") representation of the value or null if called on an empty set of elements.

https://api.jquery.com/outerHeight/

innerHeight()

$("input_selector_here").innerHeight()

Description:

Get the current computed height for the first element in the set of matched elements, including padding but not border.

https://api.jquery.com/innerHeight/

Answer 2

document.getElementsById("object").style.height

This should be the fastest solution, as it does not rely on an extra function call like the other jQuery solutions.

Answer 3

I do not like jQuery so my answer will use native javascript....

document.getElementById('your-object-id').getBoundingClientRect().height;