javascript - 如何抓取对象标签内容的高度

Question

假设对象是网页(在同一站点上)，我只需要获取对象标签内容的高度。

我提前感谢任何帮助。

谢谢大家!我知道有办法做到这一点。

编辑

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

我要的是前面index.php的高度，而不是".blog-stuff"的高度。

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

编辑编辑

我试图获取对象标签内网页的高度并将其应用于对象标签。这将增加对象的大小以显示其持有的整个网页而不是使用滚动条。溢出未按计划工作。 This screen shot shows only the object with the webpage in it

抱歉让大家感到困惑。

Answer 1

访问对象的内容

真正的挑战似乎是如何访问 Object 元素的内容。我找到的解决方案是使用 object 元素的 contentDocument 属性。我整理了一个小测试用例，您可以在其中记录 object 内容的高度。

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

在尝试访问其高度之前，请确保已加载对象内容。

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

但是，如果尝试在对象中加载外部 URL，则会遇到问题。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

---

然后有几种不同的方法可以获取 HTML 元素的高度。

纯 JavaScript 选项:

element.style.height

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

描述:

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

描述:

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;

描述:

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;

描述:

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

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

jQuery 选项

*高度("input_selector_here")*

$("input_selector_here").height()

描述:

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()

描述:

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()

描述:

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/