如何调整包含动态内容的 iframe 的大小？

发布于 2024-10-10 10:59:14 字数 1383 浏览 8 评论 0原文

我正在用注入的一些内容填充 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>

原文

I'm populating an iframe with some contents that are injected into it but I'm unable to size it correctly. I've tried a variety of methods but here is the most recent code.

After populating the iframe with an html based mail message it doesn't seem to register the scroll height.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-残月青衣踏尘吟 2024-10-17 10:59:14

不确定你在哪里遇到问题......

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

***更新了

theframe.height = document.frames['sizedframe'].document.body.scrollHeight + 'px'; ***

您可能遇到了安全问题：
将 iframe 设置为远程内容的内容高度

来自同一域/本地的内容 - 它会工作...（已验证）..如果您尝试加载远程页面，它将无法工作...

这有效

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

这不起作用（除非从 stackoverflow 上的页面调用它）

<iframe id="sizedframe" style="width:100%" onload="sizeframe(this);" src="http://www.stackoverflow.com"></iframe>

Not sure where you are having a problem...

you should just be able to quickly size it

*** Updated

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

*** You are probably running into the security problem:
Set iframe to height of content for remote content

For content from the same domain / local -it will work... (verified).. if you try to load a remote page, it wont work...

This Works

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

This does not (unless its being called from a page on stackoverflow)

<iframe id="sizedframe" style="width:100%" onload="sizeframe(this);" src="http://www.stackoverflow.com"></iframe>

回复收藏 0 原文

浸婚纱 2024-10-17 10:59:14

添加另一个答案，因为它更容易...

签出： http://thomas.bindzus.me/2007/12/24/adding-dynamic-contents-to-iframes/
我刚刚从帖子末尾抓住了他的 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>

** 在“你好”中框架”我只是一堆垃圾文本导致它调整大小...

唯一的缺点是最大高度是由画布设置的...但这可以通过调整“画布”高度来解决...

Adding another answer because its just easier...

Checkout: http://thomas.bindzus.me/2007/12/24/adding-dynamic-contents-to-iframes/
i just snagged his IFrame.js from the end of the post to create the dynamic frame...

SO try his example to see that it doesnt do it..

Then swap out the HTML for this...

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

** In the "hello frame" i just but a bunch of junk text to cause it to resize...

Only downfall is the max height is set by canvas... but that could be addressed by resizing the 'canvas' height...

回复收藏 0 原文

~没有更多了~