Warum drei Gespräche
Warum drei Vorträge? Zum einen, weil dieses Thema wirklich wenig diskutiert wird, und zum anderen, weil Master Tai diesen Artikel vor n Jahren geschrieben hat , um über die adaptive Höhe von iFrames zu sprechen . Der Grund, warum ich diese Frage noch einmal stelle, liegt darin, dass ich in früheren Projekten tatsächlich auf alle Aspekte dieses Problems gestoßen bin und es notwendig ist, es zusammenzufassen. Ich hoffe, das hilft Ihnen. Bitte korrigieren Sie mich, wenn es Fehler gibt.
Die Höhe derselben Domain und Unterseiten erhöht sich nicht dynamisch
Diese Situation ist die einfachste. Ermitteln Sie einfach die tatsächliche Höhe der Unterseite direkt über das Skript und ändern Sie die Höhe des iframe-Elements. Es gibt jedoch zwei Punkte, die beachtet werden müssen:
Wenn die Seite absolut positionierte Elemente enthält oder keine schwebenden Elemente vorhanden sind, ist die Situation etwas kompliziert, selbst Browser mit Webkit-Kernel. Weitere Informationen finden Sie in dieser Demo . Sie führen also entweder eine Browsererkennung durch, verwenden Math.max, um einen Maximalwert zu berechnen, oder Sie denken an etwas anderes.
Die im Iframe enthaltene Seite kann sehr groß sein und eine lange Ladezeit erfordern. Bei der direkten Berechnung der Höhe ist es wahrscheinlich, dass die Seite nicht heruntergeladen wurde und es zu Problemen bei der Höhenberechnung kommt. Daher ist es besser, die Höhe im Onload-Ereignis des Iframes zu berechnen. Hierbei ist auch zu beachten, dass zur Bindung des Onload-Events unter IE das Microsoft-Event-Modell obj.attachEvent verwendet werden muss. Andere Browser können obj.onload = function(){} auch direkt verwenden.
(Funktion(){
var _reSetIframe = function(){
var frame = document.getElementById("frame_content_parent")
versuchen {
var FrameContent = Frame.ContentWindow.Document,
bodyHeight = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
if (bodyHeight != frame.height){
frame.height = bodyHeight;
}
}
fangen(ex) {
Rahmen.Höhe = 1800;
}
}
if(frame.addEventListener){
frame.addEventListener
("load",function(){setInterval(_reSetIframe,200);},false);
}anders{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
In derselben Domain erhöht sich die Höhe der Unterseiten dynamisch und das Skript schlägt möglicherweise vollständig fehl.
Im zweiten Beispiel werden Skriptfehler berücksichtigt, wenn das Skript jedoch überhaupt nicht ausgeführt wird, wird der Inhalt im Iframe nicht angezeigt, da die Höhe des Iframes nicht hoch genug ist. Aus diesem Grund legen wir normalerweise im Voraus eine ausreichende Höhe fest. Zur Vereinfachung der Front-End-Steuerung halte ich es für angemessener, sie in eine CSS-Datei zu schreiben. Wenn Änderungen erforderlich sind, ändern Sie einfach das CSS. Hier habe ich selector{ height:1800px }; Es ist zu beachten, dass die im Stylesheet geschriebenen Stile nicht direkt mit node.style[property] abgerufen werden können. Für Microsoft-Modelle muss node.currentStyle[property] verwendet werden (Exkurs: Das tragische IE-Modell unterstützt kein CSS-Pseudo- Klassen), verwenden Sie für das W3C-Modell window.getComputedStyle(node,null)[property], um es abzurufen. Der Einfachheit halber habe ich YUI direkt verwendet.
Hier gibt es ein weiteres Problem, wenn die Höhe des Iframes größer als die Höhe der darin enthaltenen Seite eingestellt wird. Dies wird von jedem Browser unterschiedlich gehandhabt. Unter Firefox muss beispielsweise die Höhe des Body-Elements berechnet werden, und die Höhe des HTML-Elements entspricht der Höhe des Iframes. Wenn die Seite jedoch zufällig über eine absolute Positionierung und nicht gelöschte Floating-Elemente verfügt, ist dies nicht möglich Offensichtlich sind die Nachteile der ersten Methode geringer. Weitere Informationen finden Sie in dieser Demo .