it-swarm.com.de

Steuern Sie die Höhe des Frames mit jQuery

Ich verwende jQuery, um die Höhe eines Iframes zu steuern.

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

Dies funktioniert, wenn die Höhe des Iframes zunimmt. Wenn die Höhe abnimmt, funktioniert es nicht. Es wird nur der alte Wert zurückgegeben. Warum passiert dies?

20
Saravanan

ich benutze folgendes und es funktioniert perfekt ...

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

natürlich nur dann, wenn es aufgerufen wird (keine "autoresize") ... aber es funktioniert mit abnehmender Größe

30
Tom

Es funktioniert für mich, wenn ich es eingestellt habe und es abrufe, ohne .contents() zu verwenden. Bitte sehen Sie mein Beispiel unten.

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

EDIT: Wenn ich es richtig verstanden habe, versuchen Sie, die Bildlaufleisten loszuwerden, indem Sie das Inkrement aufrufen und durch Aufrufen der Dekrementierung auf die ursprüngliche Höhe zurückkehren.

Nachdem Sie mehrere Tests in verschiedenen Browsern durchgeführt haben. Hier ist der Code, der in FF, IE, Chrome, Safari und Opera funktioniert.

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

Ändern Sie Ihre heightIncrement - Funktion, um Folgendes zu verwenden:

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, um Folgendes zu verwenden:

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

Dies ist uralt, aber hoffentlich hilft es.

Scheinbar wie Chrome (oder vielleicht das gesamte Webkit, nicht sicher), hat es einen Fehler, durch den sich scrollHeight erhöhen (aber nicht verringern kann) (zumindest bei Inhalten in einem Iframe). Wenn der Inhalt also wächst, dann schrumpft, bleibt das scrollOffset auf der höheren Ebene. Das ist nicht sehr schön, wenn Sie versuchen, die Höhe des Iframes gerade so groß zu machen, dass sich der Inhalt ständig ändert.

Eine Hack-Workaround besteht darin, die Höhe neu zu berechnen, indem die Höhe auf einen Wert festgelegt wird, der auf jeden Fall klein genug ist, um zu bewirken, dass die Höhe des Iframes geringer ist als der Inhalt.

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 Flimmern führen, funktioniert aber normalerweise nicht auf meiner Maschine (tm).

3
InfinitiesLoop

Zum Zeitpunkt des Ladens rufe ich diese Funktion auf 

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 () verwende, wird Null zurückgegeben.

1
Saravanan

Dies ist eine einfache jQuery, die für mich funktioniert hat. Getestet in iExplorer, Firefox und Chrome:

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

Ich füge 20 Pixel hinzu, um Bildlaufleisten zu vermeiden, Sie können jedoch eine untere Schranke verwenden. 

1
Carlos Quintero

Wenn die iframe-Quelle eine andere Domäne als ihre übergeordnete Domäne ist, müssen Sie wahrscheinlich easyXDM verwenden.

0
dsjoerg

ich benutze das : 

$ ('# iframe'). live ('mousemove', Funktion (Ereignis) { 

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

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

0

Ich bin nicht sicher, ob die Leute mit ihren Methoden zufrieden sind, aber ich habe einen sehr einfachen Ansatz geschrieben, der für mich recht gut zu funktionieren scheint, in den neuesten Versionen von Safari, Chrome, IE9, Opera und Firefox.

Ich hatte ein Problem bei der Größenänderung eines Google-Kalenders, der mit iFrame gespeist wurde. Daher habe ich eine Standardgröße im Stil des iFrame festgelegt: width = "600" und die Höheneinstellungen von im Grunde das Maximum, das ich möchte, 980, glaube ich, und dann das Bild eingepackt ein Container Div mit Höhe und Breite bei 100% und min-height und min-width bei 400px bzw. 300px, und dann etwas jQuery hinzugefügt, um bei onload und onresize zu laufen ...

        <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()">

um zu verdeutlichen, läuft die Größenänderung onLoad, weil ich Mobiltelefone und Tablets in meinem responsiven Design anvisiere, das die Höhe und Breite der calendarCase div nimmt und die Höhe und Breite des iframe (#googleCalendar) entsprechend minus 10 Pixel festlegt für etwas Polsterung.

edit Ich habe vergessen zu erwähnen, dass ich mit caseWidth die Höhe des iFrame eingestellt habe, um die Proportionen eingeschränkt und irgendwo quadratisch zu halten.

Das hat bisher gut funktioniert, wenn jemand Ideen hat, warum es nicht stabil sein könnte, bitte

prost

0
user482024

Ich habe die Höhe und Breite von iframe beim Laden erfolgreich geändert. Im Grunde können Sie dies wie folgt tun, und ich poste auch einen kleinen Artikel in 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 ') .Breite())

}

);

}

}

);

0
XuDing