iframe redimensionnement dynamic en hauteur

Bonjour, j’ai actuellement 2 pages (index.html et iframe_contents.html). Les deux sont sur le même domaine.

J’essaie actuellement de redimensionner dynamicment l’iframe en fonction de la taille du contenu.

J’utilisais cela pour m’aider http://benalman.com/code/projects/jquery-resize/examples/resize/ et cela fonctionne si la balise du corps iframe_contents devient plus grande ou plus petite sous Firefox et IE 7/8/9, mais pour webkit, il ne peut que croître et ne jamais diminuer

Je l’ai réduite à la balise body dans iframe_contents.html, elle n’est pas réduite lorsque la hauteur du contenu change, mais uniquement dans l’iframe. Si iframe_contents.html n’est pas dans un iframe si je rétrécis / agrandit des éléments, la hauteur totale du corps change.

Est-ce un problème spécifique au Webkit?

Après avoir lu beaucoup de réponses ici, ils ont tous eu le même problème avec ne pas redimensionner plus petit si nécessaire. Je pense que la plupart des gens ne font qu’un redimensionnement ponctuel après le chargement du cadre, alors peut-être que cela ne les intéresse pas. J’ai besoin de redimensionner à chaque fois que la taille de la fenêtre change. Donc, pour moi, s’ils faisaient rétrécir la fenêtre, l’iframe deviendrait très grande, puis, s’ils agrandissaient la fenêtre, elle devrait à nouveau être plus courte. Cela ne se produisait pas sur certains navigateurs, car scrollHeight, clientHeight, jquery height () et toute autre hauteur trouvée avec les inspecteurs DOM (FireBug / Chrome Dev Tools) ne signalaient pas que le corps ou la hauteur html était plus court après l’iframe. fait plus large. Comme si le corps avait une hauteur minimale de 100% ou quelque chose du genre.

Pour moi, la solution consistait à définir l’iframe 0 à la hauteur, puis à vérifier le scrollHeight, puis à définir cette valeur. Pour éviter que la barre de défilement de ma page ne saute, je règle la hauteur du parent (qui contient l’iframe) sur la hauteur de l’iframe pour que la taille totale de la page rest fixe pendant cette opération.

J’aimerais avoir un échantillon plus propre, mais voici le code que j’ai:

$(element).parent().height($(element).height()); $(element).height(0); $(element).height($(element).contents().height()); $(element).parent().height("");

L’élément est mon iframe.

L’iframe a la largeur: 100% style défini et se trouve à l’intérieur d’un div avec des styles par défaut (bloc).

Code est jquery et définit la hauteur div à la hauteur iframe, puis définit iframe sur 0 height, puis définit iframe sur la hauteur du contenu. Si je supprime la ligne qui définit l’iframe à la hauteur 0, l’iframe s’agrandira si nécessaire, mais jamais plus petit.

Cela ne vous aidera peut-être pas beaucoup, mais voici une fonction que nous avons dans ce que serait votre page iframe_contents.html. Il tentera de redimensionner l’iframe dans lequel il est chargé de manière à redimensionner lui-même, à travers le navigateur et en JavaScript pur:

 function makeMeFit() { if (top.location == document.location) return; // if we're not in an iframe then don't do anything if (!window.opera && !document.mimeType && document.all && document.getElementById) { parent.document.getElementById('youriframeid').style.height = (this.document.body.offsetHeight + 30) + "px"; } else if (document.getElementById) { parent.document.getElementById('youriframeid').style.height = (this.document.body.scrollHeight + 30) + "px" } }

Vous pouvez passer des appels dans un événement resize() ou à la suite d’un événement modifiant la hauteur de votre page. Les fonctionnalités de test de cette méthode doivent séparer les navigateurs WebKit et sélectionner la propriété height correcte.