Question

我的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小部件，因此以下大多数答案抛出权限被拒绝错误

Thanxs， Nithish

Answer 1

Nithish，

如果您使用的是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);

希望这会有所帮助...

Answer 2

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

使用它。

Answer 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>

Answer 4

如果两个页面的域名相同：

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

你也可以在父页面中使用jQuery（如果它在那里可用）。

Answer 5

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

并在其上扩展以重新调整宽度...只需将其添加到您的头部即可：

  if [ ! -z "$failedTC" ] || [ -n "$failedTC" ];
   then
   echo "ITS not empaty AND NOT NULL"
   else
   echo "ITS empty or NULL"
   fi

然后确保您在iframe中具有唯一的ID，然后调用SetIframeSize：

    <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动态高度宽度根据内部内容而变化

5 个答案: