How do I resize an iframe with dynamic content?

Question

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>

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

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>

edited May 23 '17 at 12:11

Community

1
1

answered Jan 03 '11 at 17:17

CarpeNoctumDC

1,740
1
12
16

it will size to the 50 but if you print out the scrollHeight you get 0 for the value. – Middletone Jan 03 '11 at 17:21
you should do a lot more testing and analysis before answering questions. a -50 would result in no height. also what conent did you put into your frame if any to test it? – Middletone Jan 03 '11 at 17:29
First time just used a only a 1/4 page to check it.. downsizing hten worked... Longer page didnt.. Just updated and verified it works... mostly you just need to check for a max size... – CarpeNoctumDC Jan 03 '11 at 17:50
Oh and FYI.. it only works if you have access and permissions for both the local document and the iframe... – CarpeNoctumDC Jan 03 '11 at 17:51
that doesn't work. I've tried it witht eh frames scrollHeight as well as the doccument. I have already isolated this to a difference between a web page oading and dynamic content and this is only a problem when loading dynamic content (HTML that you inject into the iframe). – Middletone Jan 03 '11 at 18:18
Is the iframe a local file or a remote domain? – CarpeNoctumDC Jan 04 '11 at 01:06
In my example I said that I was putting dynamic content into the iframe. That means that the src sttribute is src='' there is no webpage loaded and that's a part of the problem. If I point it to a webpage there is no issue but instead I'm using jquery to inject html content. – Middletone Jan 04 '11 at 15:51

score -1 · Answer 2 · answered Jan 04 '11 at 16:53

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

How do I resize an iframe with dynamic content?

2 Answers2