So implementieren Sie die adaptive Höhe und Breite von Iframes in JQuery

Dieses Mal werde ich Ihnen jquery zeigen, wie Sie die adaptive Höhe und Breite von Iframe implementieren Ein praktischer Fall. Stehen Sie auf und schauen Sie sich das an.

Native und JQuery-Bibliotheken implementieren iframe-adaptive Inhaltshöhe und -breite – jQuery-Code wird empfohlen!

‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("#mainframe").load(function(){ 
$(this).height(0); //用于每次刷新时控制IFRAME高度初始化 
var height = $(this).contents().height() + 10; 
$(this).height( height < 500 ? 500 : height ); 
}); 
}); 
</script>

‍ Implementierung basierend auf JS-nativem Code:

<script language="javascript"> 
if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} 
</script>

Fügen Sie einfach die Datei hinzu, die Sie von iframe< aufrufen. / body> Dann fügen Sie den obigen Absatz hinzu

<iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die adaptive Höhe und Breite von Iframes in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!