iframe 动态高度宽度变化基于内部内容答案

【问题标题】：iframe dynamic height width change based on inner contentiframe 动态高度宽度变化基于内部内容
【发布时间】：2011-04-24 05:06:00
【问题描述】：

我有如下内容的 iframe，

    <iframe  frameborder="no" src="http:localhost/com" id="iframe">
     <div style="height:850px;width:700px;">div text </div>
   </iframe>

这显示了带有 hori 的 iframe。和垂直滚动，但不是 850px 内部内容的高度。

如何根据内部内容高度 n 宽度动态更改 iframe 高度。我在内容中使用 jquery。

它的跨域 js 小部件，所以下面的大部分答案都抛出权限被拒绝错误

谢谢，尼西语

【问题讨论】：

How to auto-size an iFrame? 的可能重复项另外，请检查 this one。
我的第二个链接中描述了一个跨域解决方案。但是恕我直言，最好摆脱 iframe 并切换到脚本标签。

标签： javascript html css iframe

【解决方案1】：

尼西语，

如果您使用的是 jquery，那么您可以轻松地找到（并设置）任何 div 的高度（在您的域中 - 而不是在外部内容上）：

// get the height - in case we want to factor it into the equation below!!
var myDivHeight = $('iframe').css('height');

// set the height
var docHeight = $(document).css('height');
$('iframe').css('height', docHeight);

希望这会有所帮助...

【讨论】：

嗨，它的 javascript 小部件在我正在加载 iframe 我们可以将小部件放置在任何地方
好吧，只要你有'widget'的主要包含div的id，逻辑仍然保持微小的变化。即使用 $('#idWidgetcontainer').css('height', docHeight);而是。
好的，这个小部件肯定来自您自己的域吗？（请参阅我上面的一点点 [（在您的域中 - 不是外部内容）]。无法获取外部生成内容的指标。

【解决方案2】：

var newHeight = $("iframe[id='iframeAutenticador']").contents().find("html").height();
$("iframe[id='iframeAutenticador']").height(newHeight);

使用这个。

【讨论】：

【解决方案3】：

您应该创建一个函数来测量内容的高度，并设置 IFrame 高度，然后在加载内容时调用 resize 函数。

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
    // This function resizes an IFrame object
    // to fit its content.
    // The IFrame tag must have a unique ID attribute.
    iframe.height = document.frames[iframe.id]
                    .document.body.scrollHeight;
}
</SCRIPT>

【讨论】：

不要再使用language 属性。它已被弃用。顺便说一句，您应该使用小写标记样式。
其实你应该使用这个，前提是你的目标是低版本的IE。这是唯一让我在 IE 8 中获得正确滚动高度的东西>

【解决方案4】：

如果两个页面的域相同：

parent.document.getElementById("iframe").style.height = $(document).height()+"px";

您也可以在父页面中使用 jQuery（如果那里可用的话）。

【讨论】：

嗨，它的 javascript 小部件在我正在加载 iframe 我们可以将小部件放置在任何地方

【解决方案5】：

我在这里找到了这个：stackoverflow.com/questions/1145850/

并对其进行扩展以重新调整宽度...您只需将其添加到您的脑海中：

    <script type="text/javascript">
        function getDocHeight(doc) {
            doc = doc || document;
            // stackoverflow.com/questions/1145850/
            var body = doc.body, html = doc.documentElement;
            var height = Math.max( body.scrollHeight, body.offsetHeight, 
                html.clientHeight, html.scrollHeight, html.offsetHeight );
            return height;
        }
        function getDocWidth(doc) {
            doc = doc || document;
            // stackoverflow.com/questions/1145850/
            var body = doc.body, html = doc.documentElement;
            var width = Math.max( body.scrollWidth, body.offsetWidth,
                html.clientWidth, html.scrollWidth, html.offsetWidth );
            return width;
        }
        function setIframeSize(id) {
            var ifrm = document.getElementById(id);
            var doc = ifrm.contentDocument? ifrm.contentDocument: 
                ifrm.contentWindow.document;
            ifrm.style.visibility = 'hidden';
            ifrm.style.height = "10px"; // reset to minimal height ...
            ifrm.style.width = "10px"; // reset to minimal width ...
            // IE opt. for bing/msn needs a bit added or scrollbar appears
            ifrm.style.height = getDocHeight( doc ) + 4 + "px";
            ifrm.style.width = getDocWidth( doc ) + 4 + "px";
            ifrm.style.visibility = 'visible';
        }
    </script>

然后确保你的 iframe 中有一个唯一的 id 并调用 SetIframeSize：

<iframe src="source.html" id="uniqueid" onload="setIframeSize(this.id)"></iframe>

【讨论】：