Jquery and frame_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-08 16:52 出处：网络

I have a page with a iframe inside, so with Jquery I want to adjust the height of the frame so it does not appear the scrollbar of the page, but appears only the scrollbar for the frame...

相关专题：iframe jquery

I have a page with a iframe inside, so with Jquery I want to adjust the height of the frame so it does not appear the scrollbar of the page, but appears only the scrollbar for the frame...

I have also a header div(with toggle function applied to it) in this page so I have to calculate also this height(when it desappears and when it is visible)...

I have tested this code and it works only with Chrome.....

Here the code:

    var he开发者_C百科ight_body = $('body').height();
    var height_header = $('#header').height(); 
    var height_logomenu = $('#logomenu').height(); 


    $('#frameconcessionaria').attr( 'height', height_body - height_header);

    $('#header').css({'display' : 'none'});

    $('body').css({'background-image' : 'none'});

    $('#logo').click(function() {

        if ($("#header").is(":hidden")) {
            $('#frameconcessionaria').attr( 'height', height_body - (height_header+height_logomenu));
            $("#header").slideDown("800",function() {
                //animation completed
                }   
            );
        } else{ 
            $("#header").slideUp("800",function() {
                $('#frameconcessionaria').attr( 'height', height_body - height_logomenu);
                }   
            );
        }
    });

and html:

 <body>

<div id="header"></div>
 <!-- IFRAME -->
<iframe src="<?php echo $src; ?>" id="frameconcessionaria" height="500px" width="100%" frameborder="0" scrolling="auto"> This page requires iframe - Questa pagina ha bisogno degli iframe</iframe>
<!-- END IFRAME -->

</body>

Do you have Firebug? What's not working exactly?

Notes: You can just use

$('#header').hide();

instead of

$('#header').css({'display' : 'none'});

You should also have this code

var resize_frame = function() {
    var height_body = $('body').height();
    var height_header = $('#header').height(); 
    var height_logomenu = $('#logomenu').height();
    $('#frameconcessionaria').attr( 'height', height_body - height_header);
}

in a function, and call it on window resize I think