使用jQuery调整iFrame高度

Question

I would like to auto-adjust the height of my iframe to the content that's in it. I've done this with a jQuery plugin, jquery-iframe-auto-height by house9, which works really well.

Now I want for my homepage (in the iframe) to have the full height of the parent page. I figured I should use an if else statement, but since I'm not that experienced with javascript (yet), I hope one of you could help me.

$(document).ready(function () {
    if ((#ifrm).($this).attr('src') == 'home.html'){
        $('#ifrm').iframeAutoHeight({minHeight: 100%});
    }
    else $('#ifrm').iframeAutoHeight({minHeight: 300});
});

Also I found this one code for getting the full height of the page, maybe it helps

if ($('#ifrm').($this).attr('src') == 'home.html'){
    (function(){var height = $(window).height();
         $('#ifrm').css('height', height)
    });
    }
    else $('#ifrm').iframeAutoHeight({minHeight: 300, debug: true});

Thank you so much in advance

Edit: you can find the website this was for here

Answer 1

This code should work for you:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        if ($('#ifrm').attr('src') == 'home.html') {
            var window_height = $(window).height();
            $('#ifrm').css("height", window_height);
        }else{
            $('#ifrm').load(function() {
                this.style.height =
                this.contentWindow.document.body.offsetHeight + 'px';
            });
        }
    });
</script>

<iframe src="home.html" id="ifrm">

It not only auto adjusts the height of the iframe to the content without using a plugin (always preferable), it also sets the full height of the "home.html" page

Bear in mind that this will only work if the iframe contents are on the same domain, the contents of iframes from other domains are locked out for security.