Maison > Article > interface Web > Une explication de la façon de rendre l'iframe adaptatif à la hauteur
Pourquoi devez-vous utiliser la hauteur adaptative iframe ? En fait, c'est juste pour des raisons de beauté, sinon l'iframe et la fenêtre seront différentes en longueur et en taille, ce qui semblera toujours inconfortable, surtout pour ceux d'entre nous qui sont programmeurs, cela ressemblera à une boule dans la gorge . Une fois qu'une autre page est intégrée dans la page via une iframe, comment cette zone de la page peut-elle s'adapter automatiquement à la hauteur de l'iframe sans avoir de barres de défilement haut, bas, gauche et droite merdiques ? La méthode suivante consiste à utiliser JavaScript pour obtenir des iframes hautement adaptatifs. Ceci est compatible avec tous les navigateurs tels que IE, Firefox, Chrome, Opera et Safari peuvent tous obtenir des iframes hautement adaptatifs. Le code js spécifique est le suivant :
function dyniframesize(down){ var Sys={}; var ua=navigator.userAgent.toLowerCase(); var s; (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]: (s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]: (s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]: (s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]: (s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0; var pTar=null; if (document.getElementById){ pTar=document.getElementById(down); }else{ eval('pTar='+down+';'); } pTar.style.display="block"; if (Sys.ie){ if(Sys.ie=='9.0'){ pTar.height=pTar.contentWindow.document.body.offsetHeight+15+"px"; pTar.width=pTar.contentWindow.document.body.scrollWidth+"px"; }else if(Sys.ie=='8.0'){ pTar.height=pTar.Document.body.offsetHeight+15+"px"; pTar.width=pTar.Document.body.scrollWidth+"px"; }else{ pTar.height=pTar.Document.body.scrollHeight+25+"px"; pTar.width=pTar.Document.body.scrollWidth+"px"; } } if (Sys.firefox){ pTar.height=pTar.contentDocument.body.offsetHeight+15+"px"; pTar.width=pTar.contentDocument.body.scrollWidth+"px"; } if (Sys.chrome){ pTar.height=pTar.contentDocument.body.offsetHeight; pTar.width=pTar.contentDocument.body.scrollWidth; } if (Sys.opera){ pTar.height=pTar.contentDocument.body.offsetHeight; pTar.width=pTar.contentDocument.body.scrollWidth; } if (Sys.safari){ if(pTar.contentDocument.body.offsetHeight <= '186'){ pTar.height=pTar.contentDocument.body.offsetHeight+10; }else{ pTar.height=pTar.contentDocument.body.offsetHeight; } pTar.width=pTar.contentDocument.body.scrollWidth; } }La méthode d'utilisation spécifique est la suivante (définissez la hauteur de l'iframe avec id=phpernote pour l'adapter à la hauteur du contenu dans l'iframe) :
<iframe marginwidth="0" framespacing="0" marginheight="0" frameborder="0" border="0" width="620px" style="border:0px;background:#FFF;max-height:245px; " scrolling="no" src="http://www.phpernote.com/comm/page/218167" id="phpernote" onload="javascript:dyniframesize('phpernote');"> </iframe>Dans le précédent article, nous avons présenté comment utiliser l'Recommandations associées :
Comment utiliser l'attribut iframe
Explication détaillée de la communication mutuelle entre main et iframe en php
Le didacticiel de téléchargement asynchrone iframe de fichier de formulaire PHP explique
Remarques sur le partage de balises iframe
Un résumé pratique de l'utilisation de l'iframe html
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!