iframe 自动高度答案

【问题标题】：iframe autoheightiframe 自动高度
【发布时间】：2011-11-24 00:50:34
【问题描述】：

我搜索了包括这里在内的所有地方，但未能找到好的解决方案。我遇到了这个问题，它可以在除 Firefox 和 IE 之外的所有浏览器中运行 :( Help?

jQuery(function() {
    sizeIFrame();
    jQuery("#ifrm").load(sizeIFrame);
});

function sizeIFrame() { 
    var videoBrowser = jQuery("#ifrm");
    var innerDoc = videoBrowser.get(0).contentDocument ?
        videoBrowser.get(0).contentDocument.documentElement :
        videoBrowser.get(0).contentWindow.document.body;
    videoBrowser.height(35);
    videoBrowser.height(innerDoc.scrollHeight + 35);
}

它在同一个域上，这是我的<iframe>

<iframe id="ifrm" src="http://localhost:8080/linkconsulting/temp.html" width="100%" frameborder="0" scrolling="no"></iframe>

我现在正在localhost 上进行测试，但它稍后仍会在同一个域上。

更新：所以我注意到这不起作用，因为它似乎干扰了 tiny.scrollbar 插件，反之亦然。不知道在这里做什么:(

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

我感觉这不起作用，因为高度是在文档加载之前计算出来的。如果您在 document.ready 事件中调用 sizeIFrame 可能会有所不同。

在您的 IFrame 中尝试以下代码：

jQuery(function(){
   parent.sizeIFrame();
}

更新：根据我们的聊天，您可以通过以下方式获取 IFrame 中文档的高度：

parent.jQuery(document).height()

我会说将高度作为参数传递给您的函数。

【讨论】：

在 IE 中出现错误网页错误详细信息用户代理：Mozilla/4.0（兼容；MSIE 8.0；Windows NT 6.1；WOW64；Trident/4.0；SLCC2；.NET CLR 2.0.50727；.NET CLR 3.5.30729；.NET CLR 3.0.30729；Media Center PC 6.0；.NET4.0C；.NET4.0E；InfoPath.3) 时间戳：2011 年 11 月 24 日星期四 01:36:12 UTC 消息：预期对象行： 7 字符：1 代码：0 URI：localhost:8080/linkconsulting/temp.html 消息：预期对象行：7 字符：1 代码：0 URI：localhost:8080/linkconsulting/temp.html
jQuery(function(){ 我觉得我忘记了一个 jquery 参考...呵呵
@Andres 在这种情况下你可以使用
现在我在第 36 行得到 Object Required 并且在那一行是这样的：videoBrowser.height(innerDoc.scrollHeight + 35);
@Andres 加入我的 JavaScript 聊天。

【解决方案2】：

您正在使用 jQuery，请尝试使用 iFrameAutoHeight plugin

【讨论】：

好的，所以我也试过了，但 IE 8 chrome 上仍然没有内容是的

【解决方案3】：

好吧，我最终采取了不同的方法。我从 iframe 中获取内容并将它们插入到 div 中。这是其他人需要的代码。感谢大家的耐心和大力帮助。

<script>
function getFile(){

var content = jQuery('#servercontent')[0];

var ifrm = jQuery('#ifrm')[0];

content.innerHTML = ifrm.contentDocument.body.innerHTML;

}
</script>
<body>
 <div id="servercontent"></div>
 <iframe id="ifrm" src="webinsamedomain.com" width="100%" frameborder="0" scrolling="no" style="display:none;"  onload="getFile();" ></iframe>
</body>

【讨论】：