Redimensionnement dynamique de l'iframe (problème avec Chrome)
Donc j'ai été en regardant autour de tous les autres Débordement de Pile postes et autour de google sur la façon de définir la hauteur/largeur automatiquement sur un iFrame. J'ai vécu près de 15 à 20 d'entre eux et aucun n'a fonctionné pour moi jusqu'à présent. Laissez-moi vous expliquer ma situation:
Je suis la définition dynamique de l'organisme d'un iFrame sur ma page. Je suis besoin de l'iFrame pour définir automatiquement la hauteur et la largeur de manière à ce que tout le texte soit visible.
je suis besoin de ce travail dans IE (7 & 8), FireFox 3, Chrome.
Ici, sont les autres problèmes que creap la question:
- Je suis en train d'écrire dans ASP.Net avec une page principale (donc l'élément de corps est hors de question).
- Je suis besoin de définir le texte de l'iFrame sur chaque publication à partir du serveur.
- Je suis besoin de l'iFrame pour redimensionner lorsque le navigateur est redimensionnée.
- Tout ce que j'ai accès à l'est du javascript, rien d'autre.
J'écris tout sur le même domaine, donc c'est pas un problème.
Je me sens comme ce que j'ai actuellement est juste une plate-forme et va s'écrouler à tout moment. Il affiche correct sous IE, mais il a une énorme marge inférieure dans FireFox et n'affiche pas du tout dans Chrome (doc est toujours nulle).
C'est ici (j'ai essayé d'être aussi détaillé que possible, laissez-moi savoir si j'ai besoin d'expliquer plus):
<script type="text/javascript">
function WriteIFrame()
{
//get the text i need to put in the iFrame (this is set from the server)
var iFrameContent = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;
var iFrameContainer = document.getElementById("divIFrameContainer");
//create the new iFrame object
var iFrame = document.createElement("iframe");
iFrame.setAttribute("id", "myIFrame");
iFrame.setAttribute("scrolling", "no");
iFrame.setAttribute("frameborder", "0");
//add the new iFrame object to the container div
iFrameContainer.appendChild(iFrame);
//find the correct inner document of the iFrame
var doc = iFrame.document;
if (doc == null && iFrame.contentDocument)
doc = iFrame.contentDocument;
//
//write the information into the iFrame
if (doc != null)
{
doc.open();
doc.writeln(iFrameContent);
doc.close();
}
//set the proper height
var height = doc.body.scrollHeight + iFrameContainer.offsetTop;
iFrame.setAttribute("style", "width: 100%; height: " + height + "px;");
}
</script>
<div id="divIFrameContainer" oninit="WriteIFrame();">
</div>
<iframe id="HelperIFrame" style="display: none;" onload="WriteIFrame();"></iframe>
<textarea id="hiddenIFrameContent" runat="server" style="display: none;" />
Pandiya, j'ai vu ce premier lien sur le net et essayé de ripper tous mes trucs et mettre en et j'obtiens les mêmes résultats. Dans IE est fine, FF a de la marge du bas, et rien n'est indiqué dans Chrome.
OriginalL'auteur Miles | 2009-12-15
Vous devez vous connecter pour publier un commentaire.
Welllll, après déconner avec cette une couple d'heures, j'ai enfin réussi à le faire fonctionner.
Juste pour que je me rendre à l'évidence, il y a un problème de synchronisation avec google Chrome. Si vous définir dynamiquement le contenu d'une iFrame sur la page de chargement, vous devez attendre quelques millisecondes avant que vous pouvez régler correctement la hauteur. C'est pourquoi j'ai utilisé la fonction setTimeout et cela a fonctionné à chaque fois pour tous les navigateurs, si vous n'avez pas, parfois, Chrome serait deux fois plus important que ne l'ont été.
Voici le code que j'ai utilisé pour le faire fonctionner sous IE, FF et Chrome:
ASP Côté:
Nous avons eu la suite (j'espère que cela montre bien):
ASP.net: <textarea id="hiddenIFrameContent" runat="server" style="display:none;" />
C#: hiddenIFrameContent.Value = "tout ce que vous voulez qu'il soit";
Mieux que d'utiliser setTimeout est pour redimensionner iframe après il est chargé: $('iframe').load(function() { ... });
OriginalL'auteur Miles
Cela a été de me tuer comme tout le monde et je suis venu avec un exemple qui semble être compatible avec IE8, Chrome, Safari et FF. Je ne l'ai pas testé dans la version IE7 ou IE6.
Je ne peux pas prendre 100% du crédit parce que j'ai eu des morceaux à partir de différents sites. La plupart des solutions je suis tombé sur trop compliqué le problème.
- Je utiliser coldfusion, de sorte que vous aurez besoin de vérifier le navigateur dans votre propre langue.
Si c'est FF, Safari ou Mozilla (toute version), vous pouvez utiliser ce script
IE8 est un peu plus agréable pour nous les programmeurs
Voici le script IFRAME, vous pouvez supprimer la couleur d'arrière-plan et de définir votre propre largeur et url.
Qui couvre assez bien.
OriginalL'auteur Kevin Duncan