Non classé

Ajuster la hauteur d’un DIV d’après le contenu d’un IFRAME sans scrollbar

Si vous cherchez le code pour ajuster la hauteur d’un DIV d’après le contenu d’un IFRAME, vous allez être heureux de lire cet article ! C’est très simple, c’est supporté par tous les browsers et ça fonctionne cross-domain : un peu de Javascript, et c’est tout.

CONTEXTE

Si vous utilisez un IFRAME pour vos formulaires (technique utilisée par les outils de marketing automation), vous devez définir une hauteur fixe dans le code de la page comme ceci :

<iframe src="http://www2.domaine.com/1234567890" width="100%" height="500"...></iframe>

Le problème apparaît lorsque l’utilisateur clique sur le bouton « Soumettre » :

– Si un message d’erreur s’affiche, le contenu du IFRAME devient plus haut que la hauteur du contenu original = une scrollbar s’affiche et le bouton « Soumettre » disparaît sous la région visible.
– Si un message de succès apparaît et que le contenu est plus haut que le contenu original = une scrollbar apparaît (et on n’aime pas ça).
– Si un message de succès apparaît et que le contenu est plus petit que le contenu original  = il n’y a pas de scrollbar, mais le contenu semble perdu dans le IFRAME (et on n’aime pas ça).

La solution: 3 petits bouts de code

1. Mettre ce code dans le <body> de la page qui contient le IFRAME

<a href="http://a%20class=">http://a%20class=</a>

var zino_resize = function (event) {
if (event.origin !== "http://www2.domaine.com") {
return;
}
var zino_iframe = document.getElementById('zino_iframe');
if (zino_iframe) {
zino_iframe.style.height = event.data + "px";
}
};
if (window.addEventListener) {
window.addEventListener("message", zino_resize, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", zino_resize);
}

*** Changez www2.domaine.com/1234567890 et www2.domaine.com par votre domaine. ***

2. Mettre ce code dans le <head> de la page IFRAME

function iframe_resize(){
var body = document.body,
html = document.documentElement,
height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
if (parent.postMessage) {
parent.postMessage(height, "http://www.domaine.com");
}
}

*** Changez www.domaine.com par votre domaine. ***

3. Changez le code <body> de la page IFRAME par ceci.

<body onload="iframe_resize();">

C’est tout ! J’espère que ça vous sera utile.

Source : http://zinoui.com/blog/cross-domain-iframe-resize

Par défaut