Iframe et hauteur automatique

Pas la peine de le dire je sais ce que vous pensez des iframes.
Cet article n’est pas la pour dire si oui ou non les iframe sont une bonne idées.
Ce petit bout de JavaScript va vous permettre de définir la taille d’une iframe en fonction de son contenu.
En gros elle va vous permettre d’avoir une auteur de 100% pour l’iframe, donc pas d’ascenseur!

J’ai trouvé ce code sur ce site, www.zepitt.ch, vous pouvez toujours allez faire un tour pour voir le code original et remercier l’auteur!

En effet il est impossible de définir une taille automatique à une iframe, mais JavaScript va pallier à ça.
Malheureusement, ce code ne fonctionne que si la iframe est hébergé sur le même nom de domaine que la page appelante. Sécurité oblige!

Ce script va récupérer la hauteur du document affiché par l’iframe, puis il va tout simplement lui attribuer.

Il doit être placé dans la page appelé par l’iframe et non dans la page appelante.

function frameAutoHeight() {
	var superParent =  window.parent.document; // récupération de l'élément document de la page appelant l'iframe
	var els = superParent.getElementsByTagName('iframe'); // récupération de toutes les iframe de la page parent
	for(var x = 0; x <= els.length -1; x++) { // on boucle sur les iframe trouvés
		if (!window.opera && !document.mimeType && document.all && document.getElementById) {
			els[x].style.height=this.document.body.offsetHeight+"px" // application de la hauteur
		} else if(document.getElementById) {
			hauteur = this.document.body.scrollHeight + 50;
			els[x].style.height=hauteur+"px" // application de la hauteur
		}
	}
}

Maintenant pour exécuter cette fonction, un simple onload= »frameAutoHeight(); » dans la balise body de la page appelé par l’iframe.

C’est sympathique, mais cette fonction redimensionne toutes les iframes d’une page.
Qu’a cela ne tienne!
Attribuons une class à notre iframe, appelons la « redimensionne-moi » et comme je suis généreux je vous fournie le script modifié.

function frameAutoHeight() {
	var superParent =  window.parent.document;
	var els = superParent.getElementsByTagName('iframe');

	for(var x = 0; x <= els.length -1; x++) {
		if(els[x].className == "redimentionne-moi") {
			if (!window.opera && !document.mimeType && document.all && document.getElementById) {
				els[x].style.height=this.document.body.offsetHeight + "px"
			} else if(document.getElementById) {
				hauteur = this.document.body.scrollHeight + 50;
				els[x].style.height=hauteur + "px"
			}
		}
	}
}

voilà pour aujourd’hui!

L’idée et la base du code ont été trouvé sur www.zepitt.ch, je n’est fait que le modifier pour mes besoins.

En ce qui concerne le redimensionnement d’iframe en cross domaine (une page hébergé sur un autre domaine), voici deux solutions trouvées sur la toile. Certes elles sont un peu tordue, mais elles ont le mérite de fonctionner !

Tagués avec : , , ,
Publié dans Faites du Web, JavaScript - AJAX
Un commentaire pour “Iframe et hauteur automatique
  1. waldo2188 dit :

    Je n’ai pas testé, mais sur ce site il propose quelque chose de bien plus simple -> http://www.erreur500.com/?p=143

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*