<object/>元素嵌入的内容自适应高度

Question

<object/>元素嵌入的内容自适应高度

9

我正在尝试根据嵌入的内容获取<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;
}

编辑我希望将对象的大小调整为其内容大小，以避免对象元素的滚动。它应该是页面滚动而不是对象元素滚动。

- Manu K Mohan

1

顺便提一下，你不必为 "auto" 声明高度。高度的默认值是 "auto"。你想让对象尽可能大以适应内容？那么就不需要滚动了吗？ - Dwza

@Dwza 这是我的问题，我想让对象尽可能大地适应其内容，以避免滚动。 - Manu K Mohan

嗯，这不是一个好的方法，但它可以工作。如果您检查object的计算样式，您会发现它有height:16155px，因此您可以为object添加一些固定高度，如17000px，以去除滚动条 - JSFiddle。 - Vucko

@Vucko我们能让它变得动态吗？我的意思是，如果我想要动态更改数据URL，我该如何获取高度？ - Manu K Mohan

如果你能使用JS，Vucko刚刚为你提供了答案，你需要获取计算高度，请检查jQuery outerHeight。如果你不能使用jQuery，请查看Window.getComputedStyle()，同时注意浏览器兼容性。唯一的问题是在你应该获取它时，检查对象是否具有onload/success事件，如果有，你基本上就完成了。 - Onur Topal

@OnurTOPAL 对于对象，outerHeight、clientHeight和innerHeight都会给出当前对象标签的相同高度，例如436。由于我们正在访问跨域帧，因此无法获取计算样式。 - Manu K Mohan

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Redouane · Answer 1

它必须在服务器下运行

使用 "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 加载 txt 文件并进行搜索

- faby · Answer 2

工作的fiddle（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>

- Redouane · Answer 3

如果在同一域中，请使用javascript函数"contentDocument()"。

可以尝试使用ajax代替。