Normalement, vous définissez la largeur et la hauteur des iframes. Si le contenu à l'intérieur est plus gros, les barres de défilement doivent suffire. Le script ci-dessous tente de résoudre ce problème en redimensionnant dynamiquement l'iframe pour l'adapter au contenu qu'il charge.
$(function()( var iFrames = $('iframe'); function iResize() ( for (var i = 0, j = iFrames.length; i < j; i++) ( iFrames(i).style.height = iFrames(i).contentWindow.document.body.offsetHeight + 'px';) ) if ($.browser.safari || $.browser.opera) ( iFrames.load(function()( setTimeout(iResize, 0); )); for (var i = 0, j = iFrames.length; i < j; i++) ( var iSource = iFrames(i).src; iFrames(i).src = ''; iFrames(i).src = iSource; ) ) else ( iFrames.load(function() ( this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; )); ) )); Redimensionnera un iframe comme ceci:
Voir la démo
Toujours problématique…
- La source du contenu iframe doit résider sur le même domaine
- si le contenu à l'intérieur de l'iframe change de hauteur, cela ne s'adaptera pas
- J'ai laissé le code Google Analytics hors de la démo ci-dessus, car lorsque je l'ai ajouté, il semble interférer et ne pas redimensionner l'iframe, bien qu'il ne semble pas générer d'erreurs.