J’ouvre ma page de blog sur mon site. Le problème est je peux donner une largeur d’un iframe, mais la hauteur doit être dynamique afin qu’il n’y a aucune barre de défilement dans l’iframe, et il ressemble à une seule page...
J’ai essayé divers code JavaScript pour calculer la hauteur du contenu, mais chacun d’eux donne une erreur accès refusé permission et n’est d’aucune utilité.
Pouvons-nous utiliser Ajax pour calculer la hauteur, ou peut-être à l’aide de PHP ?
Pour répondre à vos deux subquestions: Non, vous ne pouvez pas faire cela avec l'Ajax, et vous ne pouvez le calculer avec PHP.
Ce que j'ai fait dans le passé est d'utiliser un déclencheur de l'iframe avais la page en window.onload (PAS domready, car il peut prendre un certain temps pour les images à charger) pour passer à la page de la hauteur du corps de la mère.
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
Puis l' parent.resizeIframe ressemble à ceci:
function resizeIframe(newHeight)
{
document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
Et voila, vous avez une solide resizer qui déclenche une fois que la page est entièrement rendu avec pas de mauvaises contentdocument vs contentWindow tripoter :)
Bien sûr, maintenant les gens vont voir votre iframe à défaut hauteur de la première, mais cela peut être facilement manipulé par masquage de votre iframe au premier abord et il suffit de montrer un "chargement" de l'image. Puis, lorsque l' resizeIframe fonction des coups de pied dans, a mis deux lignes supplémentaires dans là que va se cacher le chargement de l'image, et de montrer l'iframe pour que les faux Ajax look.
Bien sûr, cela ne fonctionne qu'à partir du même domaine, de sorte que vous voudrez peut-être avoir un proxy script PHP pour intégrer ce genre de choses, et une fois que vous y allez, vous pourriez tout aussi bien intégrer votre blog flux RSS directement dans votre site avec PHP.
Côté contenu de l'IFRAME est le genre de chose facile à trouver sur Google. Voici une solution:
<script type="text/javascript">
function autoIframe(frameId) {
try {
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10;
}
catch(err) {
window.status = err.message;
}
}
</script>
Bien sûr, cela ne résout pas le cross-domain problème que vous rencontrez... la mise en document.domain pourrait aider si ces sites sont dans le même lieu. Je ne pense pas qu'il existe une solution si vous avez iframe-ing des sites aléatoires.
Voici ma solution au problème en utilisant MooTools qui fonctionne dans Firefox 3.6, Safari 4.0.4 et Internet Explorer 7:
var iframe_container = $('iframe_container_id');
var iframe_style = {
height: 300,
width: '100%'
};
if (!Browser.Engine.trident) {
// IE has hasLayout issues if iframe display is none, so don't use the loading class
iframe_container.addClass('loading');
iframe_style.display = 'none';
}
this.iframe = new IFrame({
frameBorder: 0,
src: "http://www.youriframeurl.com/",
styles: iframe_style,
events: {
'load': function() {
var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
var h = this.measure(function(){
return innerDoc.body.scrollHeight;
});
this.setStyles({
height: h.toInt(),
display: 'block'
});
if (!Browser.Engine.trident) {
iframe_container.removeClass('loading');
}
}
}
}).inject(iframe_container);
Style la classe "loading" pour afficher un graphique de chargement Ajax au milieu du conteneur iframe. Ensuite, pour les navigateurs autres qu'Internet Explorer, il affichera l'IFRAME de hauteur complète une fois le chargement de son contenu terminé et supprimera le graphique de chargement.
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.
