Zusammenfassung verschiedener Methoden zur adaptiven Höhe des iframe_Experience-Austauschs-CSS-Tutorial-php.cn

Zusammenfassung verschiedener Methoden zur adaptiven Höhe des iframe_Experience-Austauschs

WBOY

Freigeben： 2016-05-16 12:04:39

Original

2261 Leute haben es durchsucht

Da der Iframe ohne Rahmen nahtlos in die Webseite integriert werden kann, ist es möglich, einige Daten der Seite zu aktualisieren, ohne die Seite zu aktualisieren. Allerdings ist die Größe des Iframes nicht so „skalierbar“ wie die Ebene, was zu Problemen führt Problem, zu viel ist nicht gut, wenn die Höhe eines Iframes eingestellt wird, und weniger ist noch schlimmer. Lassen Sie mich Ihnen nun eine Möglichkeit nennen, die Höhe eines Iframes dynamisch anzupassen, hauptsächlich die folgenden JS-Funktionen:
Zuerst diese Methode: Der Code ist einfach und die Kompatibilität ist in Ordnung. Sie können ihn zuerst testen.

Code kopieren Der Code lautet wie folgt:

 
Funktion SetWinHeight(obj) 
{ 
var win=obj; 
if (document.getElementById) 
{ 
if (win && !window.opera) 
{ 
if (win.contentDocument && win .contentDocument.body.offsetHeight) 
win.height = win.contentDocument.body.offsetHeight; 
else if(win.Document && win.Document.body.scrollHeight) 
win.height = win.Document .body. scrollHeight; 
} 
} 

 

Schließlich darf beim Hinzufügen von iframe die ID auch nicht mit win übereinstimmen Funktion

Code kopieren Der Code lautet wie folgt:

&lt ;/iframe> <br><br> </div>Diese Art von Code ähnelt der oben genannten Lösung <br><br>Der klassische Code iFrame adaptive height hat den Test in IE6/IE7/IE8/Firefox/Opera/ bestanden. Chrom/Safari. <strong> </strong>HTML-Code: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="29880" class="copybut" id="copybut29880" onclick="doCopy('code29880')">Code kopieren <u></u></a> Der Code lautet wie folgt: </span></div> <div class="codebody" id="code29880"> <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" >< /iframe> Javascript-Code: <br><script type="text/javascript" language="javascript"> <br>function iFrameHeight() { <br>var ifm= document.getElementById("iframepage"); 🎜>var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; <br>if(ifm != null && subWeb != null) { <br>ifm.height = subWeb.body .scrollHeight; <br>} <br>} <br></script> <br><br><br>
</div>
<br>Das Folgende ist kompatibler <br><strong></strong><br> <div class="codetitle">
<span>Code kopieren<a style="CURSOR: pointer" data="69401" class="copybut" id="copybut69401" onclick="doCopy('code69401')"><u></u> Der Code lautet wie folgt:</a></span> </div><script language="javascript" type="text/javascript"&gt ; <div class="codebody" id="code69401">function dyniframesize(down) { <br>var pTar = null; <br>pTar = document.getElementById(down); <br>else{ <br>eval(' ​​pTar = ' + down + ';'); <br>} <br>if (pTar && !window.opera){ <br>//begin resize iframe <br>pTar.style.display= "block" <br>if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ <br>//ns6 syntax <br>pTar.height = pTar.contentDocument.body.offsetHeight +20; width = pTar.contentDocument .body.scrollWidth+20; <br>} <br>else if (pTar.Document && pTar.Document.body.scrollHeight){ <br>//ie5+ syntax <br>pTar.height = pTar .Document.body.scrollHeight; <br>pTar.width = pTar.Document.body.scrollWidth; <br>} <br></script> "/default2.aspx " frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm ');" width="100%"> <br> 




Iframe-Lösung für eine andere Situation (super einfach) 
 
 Wichtige Tipps: Die Webadresse, die Sie in src= eingeben müssen, muss sich auf derselben Site wie diese Seite befinden. Andernfalls wird ein Fehler mit der Meldung „Zugriff verweigert!“ angezeigt. „(Eigentlich liegt das an dem domänenübergreifenden Problem von Js, das zur Zugriffsverweigerung führt) 
 Ich bin schon einmal auf dieses Problem gestoßen, um die Antwort zu erhalten, und habe festgestellt, dass viele Leute auch auf ein solches Problem gestoßen sind ein Problem. Jetzt teile ich die Lösung
1. Erstellen Sie eine Bottom.js-Datei und geben Sie dann den folgenden Code ein (nur zwei Zeilen) 

Kopieren Sie den Code

Der Code lautet wie folgt:

parent.document.all("Frame ID name").style.height=document.body.scrollHeight; .document.all(" Frame-ID-Name").style.width=document.body.scrollWidth;
Der Frame-ID-Name ist hier die ID des Iframes, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

2. Fügen Sie

zu jeder enthaltenen Datei in Ihrer Website hinzu lautet wie folgt:

3 Es ist ein Tag!
Den Test unter WINXP und IE6 bestanden. Es ist ganz einfach!
Implementieren Sie die adaptive Höhe von Iframe
Implementieren Sie die adaptive Höhe von Iframe, die sich automatisch an die Länge der Seite anpassen kann, um das Phänomen zu vermeiden, dass Bildlaufleisten gleichzeitig auf der Seite und im Iframe angezeigt werden.

Code kopieren Der Code lautet wie folgt:

Die dritte Methode ist die Batch-Iframe-Anpassung: Immer wenn Sie bei der Arbeit auf einen Iframe stoßen In Bezug auf das Problem der inhaltsadaptiven Höhe habe ich bereits im Internet Lösungen für ähnliche Probleme gesehen. Daher habe ich gesucht und eine relativ vollständige Lösung gefunden, die mit Browsern kompatibel ist, sodass ich sie nicht selbst schreiben muss.
Obwohl Sie es nicht selbst schreiben müssen, muss die Idee dennoch verstanden werden. Im Wesentlichen besteht sie darin, die Höhe des Inhalts im Dokument zu ermitteln, die durch das iframe-Attribut src angegeben wird, und diese dann zum Festlegen zu verwenden Höhe des Iframes selbst. Wenn die Seite geladen wird, auf der sich der Iframe befindet, wird die Höhe aller Iframes automatisch festgelegt, was Zeit und Aufwand spart Benötigen Sie eine adaptive Höhe, rufen Sie das Iframe-Array direkt ab und geben Sie es an den Code weiter. Sie müssen nicht einmal die ID selbst schreiben, und das Programm ist abgeschlossen. (Der Code wird eingefügt:)

Kopieren Sie den Code Der Code lautet wie folgt:

 
Jemand im Internet hat die Methode verbessert und das Problem der automatischen Anpassung der Höhe des Iframes gelöst Der Inhalt des im Iframe enthaltenen Dokuments ändert sich dynamisch. Das Prinzip besteht darin, die Inhaltshöhe des im Iframe enthaltenen Dokuments auf der Seite, auf der sich der Iframe befindet, kontinuierlich zu scannen und die Höhe des Iframes selbst zu ändern Problem, aber es ist schwer zu sagen, ob es Auswirkungen auf die Seitengeschwindigkeit und die Systemressourcennutzung haben wird. Ich denke, dass die Methode etwas paranoid ist. Es sollte eine bessere Lösung geben. 

Die vierte Methode, bei der nur die ID des bekannten Iframes aufgerufen wird, wird nicht empfohlen

Code kopieren

Der Code lautet wie folgt:

function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document. body.scrollHeight :iframeObj.contentDocument.body.offsetHeight);},200) }Wie verwende ich es? Fügen Sie dem Iframe eine ID hinzu, die angepasst werden muss, und führen Sie es dann aus js.