Une explication de la façon de rendre l'iframe adaptatif à la hauteur-tutoriel HTML-php.cn

Une explication de la façon de rendre l'iframe adaptatif à la hauteur

小云云

Libérer： 2017-11-17 09:50:33

original

2144 Les gens l'ont consulté

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(&#39;pTar=&#39;+down+&#39;;&#39;);
}
pTar.style.display="block";
if (Sys.ie){
if(Sys.ie==&#39;9.0&#39;){
pTar.height=pTar.contentWindow.document.body.offsetHeight+15+"px";
pTar.width=pTar.contentWindow.document.body.scrollWidth+"px";
}else if(Sys.ie==&#39;8.0&#39;){
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 <= &#39;186&#39;){
pTar.height=pTar.contentDocument.body.offsetHeight+10;
}else{
pTar.height=pTar.contentDocument.body.offsetHeight;
}
pTar.width=pTar.contentDocument.body.scrollWidth;
}
}

Copier après la connexion

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(&#39;phpernote&#39;);">
</iframe>

Copier après la connexion

Dans le précédent article, nous avons présenté comment utiliser l'

attribut iframe , cet article vous apprend toujours la solution à la hauteur adaptative iframe. J'espère que ces deux articles vous donneront une compréhension plus approfondie des balises iframe.

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!