javascript - How to grab height of object tag content - Stack Overflow

admin管理员组

文章数量:1330564

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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 12, 2014 at 23:21 Mathias 5,67022 gold badges3333 silver badges4747 bronze badges asked Mar 12, 2014 at 19:08 user1816910user1816910 2

• Can you clarify, what the object is? Give an example. Right now I understand that you want to get the height of a webpage – Huangism Commented Mar 12, 2014 at 19:14
• I want the height of a webpage, thats inside of an object. – user1816910 Commented Mar 12, 2014 at 21:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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./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/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/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/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/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/en-US/docs/Web/API/HTMLElement.offsetHeight

jQuery options

*height("input_selector_here")*

$("input_selector_here").height()

Description:

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

https://api.jquery./height/

outerHeight()

$("input_selector_here").outerHeight()

Description:

Get the current puted 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./outerHeight/

innerHeight()

$("input_selector_here").innerHeight()

Description:

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

https://api.jquery./innerHeight/

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

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

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.

本文标签： javascriptHow to grab height of object tag contentStack Overflow