Par exemple :
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>Je veux qu'il puisse ajuster sa hauteur en fonction du contenu qu'il contient, sans utiliser le scroll.
Ajoutez ceci à votre <head> section :
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>Et changez votre iframe en ceci :
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />Comme on le trouve sur discussion sur le sitepoint .
Cela ne fonctionnera pas si l'iframe contient du contenu provenant d'un autre domaine, en raison de l'obligation d'utiliser la fonction Politique de l'origine identique Il y a une autre question sur le SO avec quelques solutions inter-domaines. stackoverflow.com/questions/5589756/
La solution semble ne pas fonctionner si le contenu de l'iframe a un changement de hauteur par js (par exemple un slider).
Vous pouvez utiliser cette bibliothèque qui, au départ, dimensionne correctement votre iframe et la maintient à la bonne taille en détectant chaque fois que la taille du contenu de l'iframe change (soit par une vérification régulière dans un fichier de type setInterval ou via MutationObserver ) et le redimensionner.
https://github.com/davidjbradshaw/iframe-resizer
Il existe également une version React.
https://github.com/davidjbradshaw/iframe-resizer-react
Cela fonctionne avec des iframes de même domaine et de domaine croisé.
Note : lors de l'utilisation pour le cross domain, il faut être capable d'injecter un fichier js dans l'iframe... Cela ne semble pas être une option viable lorsque vous ne contrôlez pas la source de l'iframe.
Un bogue majeur de cette bibliothèque est qu'elle ne peut pas gérer les éléments suivants vh .
La suggestion de hjpotter92 ne fonctionne pas dans safari ! J'ai fait un petit ajustement au script pour qu'il fonctionne maintenant aussi dans Safari.
La seule modification apportée consiste à remettre la hauteur à 0 à chaque chargement afin de permettre à certains navigateurs de réduire la hauteur.
Ajoutez ceci à <head> étiquette :
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>Et ajoutez ce qui suit onload à votre iframe, comme suit
<iframe onload='resizeIframe(this)'></iframe>
Cela ne fonctionne pas non plus si le contenu de l'iframe provient de l'attribut srcdoc. La hauteur sera mal définie.
Merci, cela aurait probablement dû être un commentaire/suggestion à l'esprit du post de hjpotter....
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height=(newheight) + "px";
document.getElementById(id).width=(newwidth) + "px";
}ajoutez ceci à votre iframe : onload="autoResize('youriframeid')"
J'ai eu des problèmes dans le passé en appelant iframe.onload pour des iframes créés dynamiquement, donc j'ai choisi cette approche pour définir la taille de l'iframe :
Vue iFrame
var height = $("body").outerHeight();
parent.SetIFrameHeight(height);Vue principale
SetIFrameHeight = function(height) {
$("#iFrameWrapper").height(height);
}(cela ne fonctionnera que si les deux vues sont dans le même domaine).
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
2 votes
Cela peut se faire via les CSS. Il existe un concept appelé media queries dans lequel le contenu est redimensionné en fonction de la taille de l'écran.
1 votes
Angular iFrame Auto-Height : gitlab.com/reduardo7/angular-iframe-auto-height
4 votes
"Angular ", c'est-à-dire Javascript requis ? En d'autres termes, il n'est pas possible de faire cela sur des iframes intersites (en raison des restrictions liées aux scripts intersites), n'est-ce pas ? Comme le suggère @clankill3r, cela démontre la nécessité d'une solution purement CSS à ce problème !