如何使用动态内容调整iframe的大小？_Iframe_Resize_Dynamic Content

如何使用动态内容调整iframe的大小？

iframe

如何使用动态内容调整iframe的大小？,iframe,resize,dynamic-content,Iframe,Resize,Dynamic Content,我正在用一些注入的内容填充iframe，但无法正确调整其大小。我尝试了多种方法，但这里是最新的代码在使用基于html的邮件消息填充iframe之后，它似乎没有注册滚动高度 <iframe scrolling="no" width="100%" onload="javascript:(LoadIFrame(this));" > HTML content goes here. Make sure it's long enough to need to scroll befor

我正在用一些注入的内容填充iframe，但无法正确调整其大小。我尝试了多种方法，但这里是最新的代码

在使用基于html的邮件消息填充iframe之后，它似乎没有注册滚动高度

    <iframe scrolling="no" width="100%" onload="javascript:(LoadIFrame(this));" >
HTML content goes here.  Make sure it's long enough to need to scroll before testing.
</iframe>

<script type="text/javascript">
    function LoadIFrame(iframe) {
        $("iframe").each(function() {
            $(this).load(function() {
                var doc = this.document;
                if (this.contentDocument) {
                    doc = this.contentDocument;
                } else if (this.contentWindow) {
                    doc = this.contentWindow.document;
                } else if (this.document) {
                    doc = this.document;
                }
                this.height = (doc.body.scrollHeight + 50) + 'px';
                this.onload = '';
            });

            txt = $(this).text();
            var doc = this.document;
            if (this.contentDocument) {
                doc = this.contentDocument;
            } else if (this.contentWindow) {
                doc = this.contentWindow.document;
            } else if (this.document) {
                doc = this.document;
            }
            doc.open();
            doc.writeln(txt);
            doc.close();
        });
    }
</script>


HTML内容在这里。确保它足够长，在测试之前需要滚动。
函数LoadIFrame（iframe）{
$（“iframe”）。每个（函数（）{
$（this.load（function（））{
var doc=本文件；
if（此.contentDocument）{
doc=this.contentDocument；
}else if（this.contentWindow）{
doc=this.contentWindow.document；
}else if（本文件）{
doc=本文件；
}
this.height=（doc.body.scrollHeight+50）+“px”；
this.onload=''；
});
txt=$（this.text（）；
var doc=本文件；
if（此.contentDocument）{
doc=this.contentDocument；
}else if（this.contentWindow）{
doc=this.contentWindow.document；
}else if（本文件）{
doc=本文件；
}
doc.open（）；
书面文件（txt）；
doc.close（）；
});
}

不确定您在哪里遇到问题

您应该能够快速调整它的大小

***更新

theframe.height=document.frames['sizedframe'].document.body.scrollHeight+'px'；}

***您可能遇到了安全问题：

对于来自同一域/本地的内容-它将起作用。。。（核实）。。如果您尝试加载远程页面，它将无法工作

这很有效

<iframe id="sizedframe" style="width:100%" onload="sizeframe(this);" src="demo.htm"></iframe>

这不会（除非从stackoverflow上的页面调用）

添加另一个答案，因为这样更容易

结帐：我刚刚从文章的末尾抓到了他的IFrame.js来创建动态框架

所以，试着用他的例子来证明它不起作用

然后将HTML换成这个

<html>
   <head>
      <title>Adding Dynamic Contents to IFrames</title>

      <script type="text/javascript" src="IFrame.js"></script>
      <script type="text/javascript">
         function onPageLoad()
         {
            var canvas = document.getElementById("canvas");
            var iframe = new IFrame(canvas);

            var div = iframe.doc.createElement("div");
            div.innerHTML = "Hello IFrame!";
            iframe.doc.body.appendChild(div);

            frameheight = iframe.document.body.scrollHeight;
            iframe.width = '100%';
            iframe.height = frameheight + 'px';
         }


      </script>
   </head>

   <body onload="onPageLoad();">
      <div id="canvas" style="border: solid 1px #000000; height: 500px; width: 500px;"></div>
   </body>
</html>


向iFrame添加动态内容
函数onPageLoad（）
{
var canvas=document.getElementById（“canvas”）；
var iframe=新iframe（画布）；
var div=iframe.doc.createElement（“div”）；
div.innerHTML=“你好，IFrame！”；
iframe.doc.body.appendChild（div）；
frameheight=iframe.document.body.scrollHeight；
iframe.width='100%'；
iframe.height=frameheight+'px'；
}

**在“hello框架”中，我只是用一堆垃圾文本来调整它的大小

唯一的下降是画布设置的最大高度。。。但这可以通过调整“画布”高度来解决…

它将大小调整为50，但如果打印出scrollHeight，则值为0。在回答问题之前，您应该进行更多的测试和分析。a-50将导致没有高度。还有，你在你的相框里放了什么东西来测试它呢？第一次只用了1/4页来检查它。。精简精简工作已经奏效。。。长一点的页面没有。。刚刚更新并验证了它的工作原理。。。大多数情况下，你只需要检查最大尺寸…哦，仅供参考。。仅当您对本地文档和iframe都具有访问权限和权限时，它才起作用……这不起作用。我试过用高度和文档。我已经将这一点与网页加载和动态内容区别开来，这只是加载动态内容（注入iframe的HTML）时的问题。

<html>
   <head>
      <title>Adding Dynamic Contents to IFrames</title>

      <script type="text/javascript" src="IFrame.js"></script>
      <script type="text/javascript">
         function onPageLoad()
         {
            var canvas = document.getElementById("canvas");
            var iframe = new IFrame(canvas);

            var div = iframe.doc.createElement("div");
            div.innerHTML = "Hello IFrame!";
            iframe.doc.body.appendChild(div);

            frameheight = iframe.document.body.scrollHeight;
            iframe.width = '100%';
            iframe.height = frameheight + 'px';
         }


      </script>
   </head>

   <body onload="onPageLoad();">
      <div id="canvas" style="border: solid 1px #000000; height: 500px; width: 500px;"></div>
   </body>
</html>