IFRAME qui s'adapte à la hauteur de son contenu

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : IFRAME qui s'adapte à la hauteur de son contenu

ClD

Mon mononyme : C!d

salut

d'aprés vous quel est le meilleur moyen pour faire un IFRAME qui s'adapte automatiquement à la hauteur de la page qu'il affiche, même si la page en question change de hauteur ou change d'adresse

le but de l'opération, c'est d'afficher un cadre autour d'une page qui serait chargée dans un IFRAME et ce cadre s'addapterai automatiquement à la hauteur du contenu, même si une autre page est chargée dans l'IFRAME et tout ça sans mettre de code dans la page qui est chargé dans l'IFRAME, c'est à dire que le programme qui permettra ça sera uniquement dans la page qui contient les balises IFRAME

merci d'avance

:hello:

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com

Publicité

gatsu35

Blablaté par Harko

Ya une méthode simple
page appelante :

Code :

<html>
<body>
<iframe id="iframe1" src="pageappelee" width="100%" frameborder="0" style="border:none">
</iframe>
</body>
</html>

page appelée :

Code :

<html>
<body onload="IframeStruct('iframe1');">
contenu de l'iframe
</body>
</html>

fonction JS :

Code :

function IframeStruct(iframeid) {
if (!window.parent) return;
var myiframe = window.parent.document.getElementById(iframeid);
if(!myiframe) return;
myiframe.style.height = document.body.scrollHeight+"px";
}

ClD

Mon mononyme : C!d

merci

sauf qu'il faut que ça fonctionne sans mettre de code dans la page qui est chargée dans l'IFRAME

mais c'est bon j'ai trouvé :

Code :

<html>
<head>
<script>
function actu_iframe(){
if(document.all) document.all.id_iframe.style.height = document.frames("id_iframe" ).document.body.scrollHeight;
else document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.scrollHeight;
}
</script>
</head>
<body>
<a href="page1.html" target="name_iframe">Page 1</a>
| <a href="page2.html" target="name_iframe">Page 2</a>
| <a href="page3.html" target="name_iframe">Page 3</a>
<br><br>
<iframe onLoad="actu_iframe();" src="page1.html" name="name_iframe" id="id_iframe" width=600 height=600 frameborder=no SCROLLING=auto>
</iframe>
<br> ICI LE BAS DE L'IFRAME
</BODY>
</HTML>

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com

gatsu35

Blablaté par Harko

:jap:
Il reste plus qu'à vérifier que tu puisse accéder à contentDocument si la page appelée est sur un autre serveur

Message édité par gatsu35 le 22-10-2006 à 09:15:53

ClD

Mon mononyme : C!d

oui ça marche que si les pages chargées dans l'iframe sont sur le même site, car sinon ya des problèmes d'autorisations entre les pages

:jap:

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com

gatsu35

Blablaté par Harko

au fait question con mais pourquoi tester le document.all ???
alors qu'un simple :

Code :

var ifr = document.getElementById("id_iframe" );
if (ifr) ifr.style.height = ifr.contentDocument.body.scrollHeight+"px";

Au passage tu testes si l'iframe existe comme ça tu es sur de ne pas générer d'erreur JS
et ensuite j'ai ajouté "px", car il faut toujours indiquer les unités en CSS.
C'est surtout valable si tu utilises un doctype correct et que ton navigateur passe en mode strict.

Mais autant prendre la bonne habitude tout de suite

ClD

Mon mononyme : C!d

en plus je crois que body.scrollHeight ça marche que avec internet explorer, avec firefox la hauteur de page à une autre identité

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com

gatsu35

Blablaté par Harko

dans ce cas essaye le offsetHeight

ClD

Mon mononyme : C!d

ha oui c'est ca la hauteur de page avec FF, maintenant reste plus qu'a faire une fonction qui marche avec IE et FF

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com

gatsu35

Blablaté par Harko

hummmmm cent balles que offsetHeight fonctionne pour IE

Publicité

ClD

Mon mononyme : C!d

non sur IE c'est scrollHeight

c'est une des nombreuses différences qu'il y a entre IE et FF

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com

gatsu35

Blablaté par Harko

Les pages que tu testes n'ont même pas de doctype non plus.

bon enfin pour répondre à ta question :

Code :

if (function structIframe() {
var ifr = document.getElementById("id_iframe" );
if (ifr) {
ifr.style.height = (ifr.contentDocument.body.scrollHeight ? ifr.contentDocument.body.scrollHeight : ifr.contentDocument.body.offsetHeight)+"px";
}
}

ClD

Mon mononyme : C!d

je suis désolé, je n'ai pas réussi à faire marcher ta fonction avec IE

voilà ce que j'ai bricolé, ça marche avec IE et FF et la hauteur s'ajuste automatiquement à chaque fois qu'on change la page qui est dans l'iframe

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function actu_iframe(){
if(navigator.appName=="Microsoft Internet Explorer" ){
if(document.all) document.all.id_iframe.style.height = document.frames("id_iframe" ).document.body.scrollHeight;
else document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.scrollHeight;
}
else{
document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.offsetHeight+"px";
}
}
</script>
</head>
<body>
<a href="page1.html" target="name_iframe">Page 1</a>
| <a href="page2.html" target="name_iframe">Page 2</a>
| <a href="page3.html" target="name_iframe">Page 3</a>
<br><br>
<iframe onLoad="actu_iframe();" src="page1.html" name="name_iframe" id="id_iframe" width=600 height=50 frameborder=yes SCROLLING=auto>
</iframe>
<br> ICI LE BAS DE L'IFRAME
</BODY>
</HTML>

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com

gatsu35

Blablaté par Harko

Après plusieurs et nombreux tests, le scrollHeight est toujours mauvais lorsqu'on essaye de le récupérer sur l'iframe depuis la page appelante.

seule la solution que je t'ai donné plus haut fonctionne correctement.

Au passage tu n'as toujours pas mis de doctype correct

ClD

Mon mononyme : C!d

ben je sais pas trop quoi te dire, le script que j'ai mis plus haut marche parfaitement chez moi avec IE et FF, pour le doctype je l'ai mis et ça change rien, j'y arrive pas avec ta fonction, on doit pas avir le même internet explorer

---------------
NOUVEAU!! Février 2024 : j'ai créé un nouveau jeu en ligne : https://www.boblybots.com

lapin21

Bonjour,

Y a-t-il moyen d'adapter automatiquement la hauteur de l'iframe pour un contenu dont la hauteur est dynamique (genre une liste lue en BDD) ?

Merci.

FlorentG

Les iframes c'est naze Vaut mieux faire sans

Siluro

et c'est pas xhtml strict

Aghould

mouahahahaha
*s'en va faire tout pleins d'iframe*
[:arhendal]

evinrude69

le web pour tous

au lieu de se la péter avec des "bouh les iframes c'est que pour les nuls"
essayez de proposer une solution pour les remplacer :pt1cable:

sans php !
et sans javascript !
ni feuilles css de la mort qui tuent

alors ? :heink:
on fait moins les malins !

bien pratique le <a target="nomdemaframe" quand même, non?

les solutions simple ne sont pas destinées qu'aux esprits simples...

sinon CID, 5 ans plus tard ton script y marche bien avec le renard, avec IE9 c'est la mouise et alors avec Chrome, je t'en parle même pas :cry: :cry: :cry:

evinrude69

le web pour tous

evinrude69

le web pour tous

au lieu de se la péter avec des "bouh les iframes c'est que pour les nuls"
essayez de proposer une solution pour les remplacer :pt1cable:

sans php !
et sans javascript !
ni feuilles css de la mort qui tuent

alors ? :heink:
on fait moins les malins !

bien pratique le <a target="nomdemaframe" quand même, non?

les solutions simples ne sont pas destinées qu'aux esprits simples...

sinon CID, 5 ans plus tard ton script y marche bien avec le renard, avec IE9 c'est la mouise et alors avec Chrome, je t'en parle même pas :cry: :cry: :cry:

evinrude69

le web pour tous

:bounce:

CID, je sais pas si 5 ans plus tard t'as encore les mains dans le camboui du web mais c'est toi le meilleur ! you are the best !!!!

ton script marche avec FF 7 IE 9 et... CHROME !
C'est en "local" que ça bloque avec ie et chrome mais in situe tout est ok

faut renommer ce post "re-dimentionner automatiquement un iframe (vous savez, cette balise pour les nazes) : un script qui fonctionne !"
paske des scripts qui marche pas/plus yen a plein les fauxrums et je sais de quoi je parle !

ps: j'entends déjà les bien-faisants du web :
"si vous arrêtez pas de trouver des solutions pour cette balise de m... comment vous voulez qu'on s'en débarrasse ?"

EH BEN JUSTEMENT ON VEUT PAS !
je lance une pétition : SAUVONS LA BALISE IFRAME !

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

IFRAME qui s'adapte à la hauteur de son contenu

Sujets relatifs
En cliquant sur un lien en change le contenu d'un div	[CSS / HTML] Supprimer le Scrolling vertical IFRAME
Contenu html en fonction du browser	[FireF.]Bordure de bloc n'allant pas jusqu'au bout (contenu insécable)
Cherche CMS adapté à mon besoin	Affichage > Source de la page révèle le contenu javascript de ma BDD
BESOIN D'AIDE SVP - Contenu textbox vers cellules plusieurs classeurs	[RESOLU] affichage de 'Resource id #5' au lieu de ma variable
changer le contenu de iframe en meme
Plus de sujets relatifs à : IFRAME qui s'adapte à la hauteur de son contenu

Page générée en 0.099 secondes