Javascript iframe基于内部内容的动态高度宽度更改

我有如下内容的iframe

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

div文本

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

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

它的跨域js小部件，因此下面的大多数回答都是抛出权限拒绝错误

Thanxs， 尼西

尼西

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

希望这对…有帮助

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

---

如果两个页面的域相同，希望这有助于…

：

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

---

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

如果两个页面的域相同：

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

---

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

您应该创建一个函数来测量内容的高度，设置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>

函数resizeIframeToFitContent（iframe）{
//此函数用于调整IFrame对象的大小
//以适应其内容。
//IFrame标记必须具有唯一的ID属性。
iframe.height=document.frames[iframe.id]
.document.body.scroll高度；
}

您应该创建一个函数来测量内容的高度，设置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>

函数resizeIframeToFitContent（iframe）{
//此函数用于调整IFrame对象的大小
//以适应其内容。
//IFrame标记必须具有唯一的ID属性。
iframe.height=document.frames[iframe.id]
.document.body.scroll高度；
}

用这个

用这个。

我在这里找到了这个：

并在其上扩展，以重新调整宽度……您只需在您的头脑中添加以下内容：

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

函数getDocHeight（doc）{
文件=文件| |文件；
//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）；
返回高度；
}
函数getDocWidth（doc）{
文件=文件| |文件；
//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）；
返回宽度；
}
函数setIframeSize（id）{
var ifrm=document.getElementById（id）；
var doc=ifrm.contentDocument？ifrm.contentDocument：
ifrm.contentWindow.document；
ifrm.style.visibility='hidden'；
ifrm.style.height=“10px”；//重置为最小高度。。。
ifrm.style.width=“10px”；//重置为最小宽度。。。
//IE选择bing/msn需要添加一点或出现滚动条
ifrm.style.height=getDocHeight（doc）+4+“px”；
ifrm.style.width=getDocWidth（doc）+4+“px”；
ifrm.style.visibility='visible'；
}

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

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

我在这里找到了：

并在其上扩展，以重新调整宽度……您只需在您的头脑中添加以下内容：

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

函数getDocHeight（doc）{
文件=文件| |文件；
//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）；
返回高度；
}
函数getDocWidth（doc）{
文件=文件| |文件；
//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）；
返回宽度；
}
函数setIframeSize（id）{
var ifrm=document.getElementById（id）；
var doc=ifrm.contentDocument？ifrm.contentDocument：
ifrm.contentWindow.document；
ifrm.style.visibility='hidden'；
ifrm.style.height=“10px”；//重置为最小高度。。。
ifrm.style.width=“10px”；//重置为最小宽度。。。
//IE选择bing/msn需要添加一点或出现滚动条
ifrm.style.height=getDocHeight（doc）+4+“px”；
ifrm.style.width=getDocWidth（doc）+4+“px”；
ifrm.style.visibility='visible'；
}

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

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

可能的副本也请检查。我的第二个链接中介绍了一个跨域解决方案。但是，我想，最好去掉iframe并切换到script标记。也可能是的副本，请检查。在我的第二个链接中描述了一个跨域解决方案。但是，我认为，最好去掉iframe并切换到script标记。嗨，它的javascript小部件在里面，我加载一个iframe，我们可以把它的javascript小部件放在任何地方。嗨，它的javascript小部件在里面，我加载一个iframe，我们可以把它的javascript小部件放在任何地方，只要您拥有“widget”的main包含div的id，逻辑仍然会有一个微小的变化。即