Ensemble iframe contenu de la hauteur de l'auto de redimensionner dynamiquement
J'ai été moi-même à la recherche pour une solution simple pour modifier la hauteur d'un iframe avec le contenu en elle.
Il semble que les règles sont que vous ne pouvez pas obtenir la hauteur de l'iframe à partir de la page qui le tient. C'est à cause de la sécurité, apparemment. Comment pouvons-nous faire cela?
- Est-il vraiment de travail de la croix de domaine ? Je n'ai pas essayer mais je pense qu'il ne devrait pas. Vous ne pouvez pas accéder à javascript à travers différents domaines.
- Si la taille est mal réglé, vous pourriez avoir besoin d'une <div style="clear:both;"> </div> à la fin de votre page dans l'iFrame. En raison de float:left;.
Vous devez vous connecter pour publier un commentaire.
Dans l'iframe:
Ce qui signifie que vous devez ajouter du code dans l'iframe de la page.
Simplement ajouter ce script à votre code DANS L'IFRAME:
Dans la page:
Dans la page de la tenue de l'iframe (dans mon cas avec ID="myiframe") ajouter un petit javascript:
Ce qui se passe maintenant c'est que lorsque l'iframe est chargé, il déclenche un script javascript dans la fenêtre parent, qui dans ce cas est la page la tenue de l'iframe.
Pour que la fonction JavaScript il envoie le nombre de pixels de son (iframe) hauteur de l'est.
La fenêtre parent prend le nombre, ajoute 32 à pour éviter les barres de défilement et les jeux de l'iframe de la hauteur pour ce nouveau numéro.
C'est tout, rien d'autre n'est nécessaire.
Mais si vous souhaitez en savoir plus petites astuces continuer à lire...
DYNAMIQUE DE LA HAUTEUR DE L'IFRAME?
Si vous comme moi, comme pour faire basculer le contenu de l'iframe hauteur de changement (sans recharger la page et le déclenchement de l'onload).
J'ai l'habitude d'ajouter un très simple bascule script que j'ai trouvé en ligne:
pour que le script juste ajouter:
La façon dont vous utilisez le script ci-dessus est facile:
Pour ceux qui aiment tout simplement de couper et coller et aller à partir de là, voici les deux pages. Dans mon cas, j'ai eu dans le même dossier, mais il devrait fonctionner de la croix de domaine trop (je pense...)
Compléter la tenue de code de la page:
Complet code iframe: (ce iframe nommé "theiframe.htm")
Démo
mutationObserver
de garder l'iFrame de la taille de l'évolution des contenus etpostMessage
pour gérer la croix de domaine en question. github.com/davidjbradshaw/iframe-resizerSolution Simple:
<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>
Cela fonctionne lorsque l'iframe et de la fenêtre parent sont dans le même domaine. Il ne fonctionne pas lorsque les deux sont dans des domaines différents.