具有嵌入内容的 <object/> 元素的自动高度答案

【问题标题】：auto height for the <object/> element with the embedded content具有嵌入内容的 <object/> 元素的自动高度
【发布时间】：2014-07-11 02:36:43
【问题描述】：

我正在尝试根据内部嵌入的内容获取<object/> 元素的自动高度。这可能吗？

这里有一个问题示例：JSFiddle。在 Chrome 中，似乎自动被忽略了。我该如何解决这个问题？

HTML

<body>
    <object id="my-object" data="http://www.rfc-editor.org/rfc/rfc1.txt"></object>
</body>

CSS

#my-object {
    height : auto;
    width : 300px;
}

编辑我想让对象与其内容一样大，以避免对象元素的滚动。它应该是对象元素滚动的页面滚动。

【问题讨论】：

顺便说一句，您不必为 auto 声明高度。高度的默认值是自动的。你试图让对象和内容一样大吗？所以没有什么可以滚动的？？？
@Dwza 那是我的问题，我想让对象和它的内容一样大，以避免滚动。
嗯，这不是一个好方法但是它有效。如果您检查object 的计算样式，您会看到它具有height:16155px，因此您可以向object 添加一些fixed 高度，例如17000px 以移除滚动条-@ 987654322@
@Vucko 我们可以让它动态吗？我的意思是，如果我想动态更改数据 URL。我将如何获得高度？
Vucko 刚刚为您提供了答案，如果您可以使用 JS，您需要获取计算高度请检查 jQuery outerHeight 如果您不能使用 jQuery，请查看 Window.getComputedStyle() 并查看浏览器兼容性。唯一的问题是当你应该检查对象是否有 onload/success 事件时，你已经完成了。

标签： javascript html css

【解决方案1】：

工作小提琴（100% 高度、最小高度和溢出隐藏到 body 和 html 元素）

http://jsfiddle.net/DmF6B/2/

html, body{
   overflow:hidden;
   height: 100%;
   min-height: 100%;
}
    #my-object {
        height : 100%;
        width : 100%;
        overflow : hidden;
    }

html

<body scroll="no">
    <object id="my-object" data="http://www.rfc-editor.org/rfc/rfc1.txt">
    </object>
</body>

【讨论】：

尝试删除它，您会发现它不起作用。
@faby 对象的大小仍然没有内容那么大。如您所见，滚动条出现在对象上。我正在尝试删除它。
@faby 我也想看看内容。我的意思是我可以看到页面滚动，但我不想要对象标签的滚动。
滚动取决于 jsfiddle 页面中框的高度。在您的页面中尝试一下。
现在试试，我已经更新了答案。也许现在就是你对我的要求。

【解决方案2】：

如果它在同一个域中，请使用 javascript 函数“contentDocument()”

试试这个：ajax

【讨论】：

您好。尝试详细说明您的解决方案为何对 OP 有帮助。
@nisanth-reddy 看看我的新答案，也许你会明白它为什么有用。

【解决方案3】：

它必须在服务器下运行

使用“contentDocument()”

<object id="my-object" type="text/plain" data="newfile.txt">
</object>
<script>
    var object = document.getElementById("my-object");
    object.onload = function () {
        var objectPre = object.contentDocument.body.childNodes[0];
        object.style.height = (objectPre.offsetHeight+20) + "px";
    };
</script>

使用 ajax 搜索使用 ajax 加载 txt 文件

【讨论】：

这样做会引发以下错误：Uncaught TypeError: Cannot read property 'body' of null at HTMLObjectElement.object.onload
@meet-shah 它必须在服务器下运行