发表新帖
发表新帖

Control iframe height with jQuery

后端 未结
关注
9 1718
情书的邮戳
情书的邮戳 2020-12-13 07:32

I am using jQuery to control the height of an iframe.

jQuery(\"iframe\",top.document).contents().height();

This works when the height of

相关标签:
9条回答
  • 梦如初夏
    2020-12-13 07:50

    I'm not sure if people are satisfied with their methods but I've written up a very very simple approach that seems to work quite well for me, in the newest of Safari, Chrome, IE9, Opera and Firefox.

    I had a problem resizing a google calendar fed iFrame so I've just made a default size to it in the iFrame's style: width="600" and height settings of basically the maximum I would want, 980 I believe, then wrapped that in a container Div with height and width at 100% and min-height and min-width at 400px and 300px respectively , and then added some jQuery to run at onload and onresize...

            <script>

        var resizeHandle = function(){
            var caseHeight = $('#calendarCase').height();
            var caseWidth = $('#calendarCase').width();
            var iframeWidth = $('#googleCalendar').width(caseWidth - 10);
            var iframeHeight = $('#googleCalendar').height(caseWidth - 10);;
        };


</script>


<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()">

    so to clarify, the resize function runs onLoad because I am targetting mobile phones and tablets in my responsive design, which takes the height and width of the calendarCase div and sets the height and width of the iframe (#googleCalendar) accordingly, minus 10 pixes for some padding.

    edit I forgot to mention that I've used the caseWidth to set the height of the iFrame in order to keep the proportions constrained and somewhere square.

    This has worked fine so far, if anyone has any ideas why it might not be stable please advise,

    cheers

    0 讨论(0)
  • 野的像风
    2020-12-13 07:52

    i use this :

    $('#iframe').live('mousemove', function (event) {

    var theFrame = $(this, parent.document.body);

    this.height($(document.body).height() - 350);
    });

    0 讨论(0)
  • 借酒劲吻你
    2020-12-13 08:03

    This is a simple jQuery that worked for me. Tested in iExplorer, Firefox and Crome:

     $('#my_frame').load(function () {  
      $(this).height($(this).contents().find("html").height()+20);
});

    I add 20 pixels just to avoid any scroll bar, but you may try a lower bound.

    0 讨论(0)
 看不清?
提交回复
热议问题