iframe automatic height not working

StackOverflow https://stackoverflow.com/questions/23338562

Pergunta

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()
Foi útil?

Solução

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/

Outras dicas

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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top