Steuern Sie die iframe-Höhe mit jQuery

Bin ich mit Hilfe von jQuery zur Steuerung der Höhe eines iframe.

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

Dies funktioniert, wenn die Höhe des iframe erhöht. Wenn die Höhe abnimmt, funktioniert es nicht. Es gibt den alten Wert. Warum ist das passiert?

Kommentar zu dem Problem
@Jose Basilio - ja, finde ich die Höhe des Iframe-contents und setzen Sie den Iframe. Kommentarautor: Saravanan
@porneL - Can u pls erklären, wie finden Sie das Objekt oder die Funktion des Iframe? Kommentarautor: Saravanan
@Saravanan - Lesen Sie Bitte meinen editierten post. Kommentarautor: Jose Basilio
@Jose Basilio - Sorry, es gibt nur null.Ich werde die Höhe der Verwendung von iframe parent-Div-Höhe.Es funktioniert einwandfrei. Trotzdem vielen Dank für ur help hilft es, für mich, an einem anderen Ort. Kommentarautor: Saravanan

InformationsquelleAutor der Frage Saravanan | 2009-06-01

  1. 30

    benutze ich und es funktioniert perfekt...

    $("#frameId").height($("#frameId").contents().find("html").height());

    natürlich nur, wenn es aufgerufen wird ("autoresize")... aber es funktioniert Zunehmender als Abnehmender

    InformationsquelleAutor der Antwort Tom

  2. 4

    Funktioniert es für mich, Wenn ich es einrichten und abrufen, ohne .contents(). Bitte siehe mein Beispiel unten.

    function changeFrameHeight(newHeight){
  jQuery("iframe",top.document).height(newHeight);
  alert("iframe height=" + jQuery("iframe",top.document).height());
}

    EDIT: Wenn ich das richtig verstehe, sind Sie versucht, um loszuwerden, der scroll-Balken durch den Aufruf der Schrittweite und gehen Sie zurück auf die ursprüngliche Höhe durch den Aufruf dekrementiert.

    Nachdem ich mehrere tests in unterschiedlichen Browsern. Hier der code funktioniert in FF, IE, Chrome, Safari und Opera.

    //first declare a variable to store the original IFrame height.
var originalHeight = $("iframe",top.document).height();

    Ändern Sie Ihre heightIncrement - Funktion verwenden Sie den folgenden:

    heightIncrement:function(){
 var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
 jQuery("iframe",top.document).css({height:heightDiv});
}

    Ändern Sie Ihre heightDecrement - Funktion verwenden Sie den folgenden:

    heightDecrement:function(){
 jQuery("iframe",top.document).css({height:originalHeight});
}

    InformationsquelleAutor der Antwort Jose Basilio

  3. 3

    Dieser ist uralt, aber hoffentlich hilft es.

    Scheint, wie Chrom (oder vielleicht auch alle webkit, nicht sicher) hat einen bug, wo die scrollHeight erhöhen kann, aber nicht abnehmen (zumindest in dem Fall der Inhalt in einem iframe). Also, wenn der Inhalt wächst, dann schrumpft die scrollOffset bleibt auf der höheren Ebene. Das ist nicht sehr schön, wenn Sie versuchen, die iframe-Höhe gerade groß genug für es ist der sich ständig verändernden Inhalte.

    Einen hack workaround ist es, eine Neuberechnung der Höhe durch die Einstellung der Höhe auf etwas, auf jeden Fall klein genug, um die Ursache des iframe-Höhe kleiner zu sein als der Inhalt, dann die scrollHeight zurückgesetzt.

    var frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0];
var body = frame.contentWindow.document.body;
var height = body.scrollHeight; //possibly incorrect
body.height = "1px";
height = body.scrollHeight; //correct

    Dies kann zu einem leichten flackern, aber normalerweise nicht, zumindest, es funktioniert auf meiner Maschine (tm).

    InformationsquelleAutor der Antwort InfinitiesLoop

  4. 1

    Zur Zeit der be-ich rufe diese Funktion 

    heightIncrement:function(){     
           if($.browser.mozilla)
           { 
             var heightDiv   = jQuery("iframe",top.document).contents().attr("height")+"px";                    
             jQuery("iframe",top.document).css({height:heightDiv});
           }
           else if($.browser.opera  || $.browser.safari || $.browser.msie)
           {               
             var heightDiv   = jQuery("iframe",top.document).height();                   
             jQuery("iframe",top.document).css({height:heightDiv}); 
           } 
}

    wenn ich ohne Inhalt() gibt null zurück.

    InformationsquelleAutor der Antwort Saravanan

  5. 1

    Dies ist eine einfache jQuery, die für mich gearbeitet. Getestet im iExplorer, Firefox und Crome:

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

    Ich hinzufügen, 20 Pixel nur zu vermeiden, jede scroll-bar, aber Sie können versuchen, eine untere Schranke.

    InformationsquelleAutor der Antwort Carlos Quintero

  6. 0

    Habe ich erfolgreich resize, iframe Höhe und Breite, wenn es geladen wird. grundsätzlich kann man dies tun, da unten, und post hab ich auch einen kleinen Artikel auf meinem blog: http://www.the-di-lab.com/?p=280

     
$(".colorbox").colorbox( 

{iframe:true, 

innerWidth:0, 

innerHeight:0, 

scrolling:false, 

onComplete:function(){ 

$.colorbox.resize( 

{ 

innerHeight:($('iframe').offset().top + $('iframe').height()), 

innerWidth:($('iframe').offset().left + $('iframe').width()) 

} 

); 

} 

} 

);

    InformationsquelleAutor der Antwort XuDing

  7. 0

    Wenn der iframe-Quelle in einer anderen Domäne als Ihre Eltern, dann werden Sie wahrscheinlich benötigen, um zu verwenden easyXDM.

    InformationsquelleAutor der Antwort dsjoerg

  8. 0

    benutze ich dieses :

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

    var theFrame = $(this, Eltern.Dokument.Körper);

    diese.Höhe($(document.Körper).height() - 350);

    });

    InformationsquelleAutor der Antwort Idham Perdameian

  9. 0

    Ich bin mir nicht sicher, ob die Menschen zufrieden sind mit Ihren Methoden, aber ich habe geschrieben, eine sehr sehr einfache Methode, die scheint zu funktionieren ziemlich gut für mich, in der neuesten Safari, Chrome, IE9, Opera und Firefox.

    Hatte ich ein problem, das ändern der Größe einer google-Kalender gefüttert iFrame also ich habe gerade eine Standard-Größe, um es in der iFrame-style: width="600" und height im wesentlichen die maximale ich würde mir wünschen, 980 ich glaube, dann verpackt das in einen Div-container mit height und width auf 100% und min-height und min-width auf 400px und 300px jeweils , und dann Hinzugefügt einige jQuery ausführen von onload und 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()">

    also zu klären, die resize-Funktion ausgeführt wird, onLoad, weil ich bin, welche auf Handys und Tabletten in mein responsive design, das die Höhe und Breite des calendarCase div und setzt die Höhe und Breite des iframe (#googleCalendar) entsprechend, minus 10 pixes für einige Polsterung.

    Bearbeiten ich vergaß zu erwähnen, dass ich die caseWidth die Höhe des iFrame in Ordnung zu halten, die Proportionen eingeschränkt und irgendwo Platz.

    Das hat alles geklappt so weit, wenn jemand eine Idee hat, warum es möglicherweise nicht stabil sein, bitte beraten,

    cheers

    InformationsquelleAutor der Antwort user482024

Schreibe einen Kommentar