具有嵌入内容的 <object/> 元素的自动高度
Posted
技术标签:
【中文标题】具有嵌入内容的 <object/> 元素的自动高度【英文标题】：auto height for the <object/> element with the embedded content 【发布时间】：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 事件时，你已经完成了。
【参考方案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 它必须在服务器下运行以上是关于具有嵌入内容的 <object/> 元素的自动高度的主要内容，如果未能解决你的问题，请参考以下文章
如何在 <object> 嵌入上获得 height=100%