如何获取对象标签内容的高度

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. 

编辑编辑

我试图抓住对象标签内的网页高度,并将其应用于对象标签.这将增加对象的大小以显示其持有的整个网页而不是使用滚动条.溢出不按计划运行. 此屏幕截图仅显示包含网页的对象

对不起,混乱的人.

Answer 1

访问Object的内容

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

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

object在尝试访问其高度之前,请确保已加载内容.

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

描述:

height CSS属性指定元素的内容区域的高度.内容区域位于元素的填充,边框和边距内.

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

element.getBoundingClientRect().高度

element.getBoundingClientRect().height

描述:

返回包含一组文本矩形的文本矩形对象.

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

element.clientHeight

element.clientHeight;

描述:

返回元素的内部高度(以像素为单位),包括填充但不包括水平滚动条高度,边框或边距.

clientHeight可以计算为CSS高度+ CSS填充 - 水平滚动条的高度(如果存在).

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

HTMLelement.offsetHeight

document.getElementById("input_id_here").offsetHeight;

描述:

元素相对于元素的offsetParent的高度.

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

jQuery选项

*height("input_selector_here")*

$("input_selector_here").height()

描述:

获取匹配元素集中第一个元素的当前计算高度.

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

outerHeight()

$("input_selector_here").outerHeight()

描述:

获取匹配元素集中第一个元素的当前计算高度,包括填充,边框和可选边距.返回值的数字(不带"px")表示,如果在空元素集上调用,则返回null.

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

innerHeight()

$("input_selector_here").innerHeight()

描述:

获取匹配元素集中第一个元素的当前计算高度,包括填充但不包括边框.

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