Comment implémenter la hauteur et la largeur adaptatives iframe dans jquery

Cette fois, je vais vous expliquer jquery comment implémenter la hauteur et la largeur adaptatives de l'iframe Quelles sont les précautions pour implémenter la hauteur et la largeur adaptatives de l'iframe avec jquery. un cas pratique. Levez-vous et jetez un œil.

javascriptLes bibliothèques natives et jquery implémentent la hauteur et la largeur du contenu adaptatif iframe --- le code jQuery est recommandé !

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

Le code basé sur la bibliothèque Jquery est facile à implémenter :

<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>

‍ Implémentation basée sur le code natif JS :

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

Juste après votre iframe Ajoutez simplement le paragraphe ci-dessus après avoir appelé le fichier  !
Cela peut également contrôler la hauteur de l'iframe pour qu'elle grandisse automatiquement avec la quantité de contenu

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

La bibliothèque jquery implémente l'iframe adaptative hauteur et largeur du contenu

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes permettant à Jquery de faire fonctionner les tableaux et les objets js

Explication détaillée de la étapes pour que jquery supprime les valeurs sélectionnées d'un tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!