iframe automatic height not working

Question

I want to set the iframe height automatically to the content height of the iframe where the max-height 800 px. This means all iframes smaller than 800 px have no scroll bar and all iframes bigger than 800 px are 800 px high with a scroll bar. I already have tried:

I don't know what I'm doing wrong, I guess it is again just one simple litte line, the folders are:

style.css
index.html
Scripts/index.js
Sides/pictures.html
Pics/Picture.png

Pictures, Styles and other functions from the index.js are functional. Here the code:

HTML of index.html:

<div id="pictures">
        <iframe src="Sides/pictures.html">
            Pictures
        </iframe>
    </div>

HTML of pictures.html:

<h1><img src="../Pics/Pictures.png" width="32" height="32">Pictures</h1>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem i

CSS for iframes:

iframe {
        width: 65%;
        max-height:800px;
        margin: auto;
        display:block;
        border: 1px solid transparent;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.9);
        padding: 0 0 0 0.5em;
      }

index.js

// Auto height for all iframes
$("iframe").load(function() {
    // http://www.w3schools.com/jsref/dom_obj_frame.asp

           try {
              var body = $(this).contents().find('body');
              this.height = 1;
              this.height = body.attr('scrollHeight');
           } catch(e){}

    });

So you can see I tried a lot and I know not all of this methods are valid but I wanted them tested. And instead of

$("iframe").load(function()

I also tried

$("iframe").each(function()

What says the javascript-console? Accessing on Frames is a little bit tricky (in particular security reasons). You use Try/catch blocks. Please print it out. — Adrian Preuss, Apr 28 '14 at 10:27
`Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a cross-origin frame.` I think it won't work if you **develop it LOCAL** use a webserver — Adrian Preuss, Apr 28 '14 at 10:36
You are right Adrian, local it won't work. Thanks a lot! xoxo — Andrea, Apr 28 '14 at 12:06

score 0 · Answer 1 · answered Apr 28 '14 at 10:36

Try this code

Javascript:

function autoResize(id){
    var newheight;
    var newwidth;
    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }
    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}

HTML:

<iframe id="iframe" onload="autoResize(this.id);" src="/your-iframe-src" ></iframe>

score 0 · Accepted Answer · answered Apr 28 '14 at 10:40

Here is a solution:

jQuery(function($) {
    $("iframe").on('load', function() {
        try {
            var body            = $(this).contents().find('body');
            var scrollHeight    = body.get(0).scrollHeight;

            console.log('scrollHeight', scrollHeight);
            $(this).css('height', scrollHeight);
        } catch(e){
            console.log(e);
        }
    });
});

WONT WORK LOCAL!!! (Security reasons), Demo: http://www.adi-code.de/stackoverflow/iframe/

iframe automatic height not working

2 Answers2