iframe che si adatta in altezza

**melmar20** · 25-09-2009, 12:10

ciao a tutti , ho questo script :

codice:

<script language="javascript" type="text/javascript">
	function iFrameHeight() {
		var h = 0;
		if ( !document.all ) {
			h = document.getElementById('blockrandom').contentDocument.height;
			document.getElementById('blockrandom').style.height = h + 60 + 'px';
		} else if( document.all ) {
			h = document.frames('blockrandom').document.body.scrollHeight;
			document.all.blockrandom.style.height = h + 20 + 'px';
		}
	}
</script>

e come codice html questo :

codice:

<iframe onload="iFrameHeight()"	id="blockrandom"
	name=""
	src="http://..."
	width="100%"
	height="1024px"
	scrolling="no"
	align="top"
	frameborder="0">
	No Iframes</iframe>

Lo scopo di questa pagina è di far si che il frame blockrandom si adatti al contenuto della pagina web caricata dentro.

Non riesco però nel mio intento e non capisco dove sbaglio.
Potreste aiutarmi per favore??

**Gluck74** · 25-09-2009, 14:29

così su due piedi mi viene in mente solo di fare un paio di controlli:

la funzione viene eseguita a livello di pagina web principale, o a livello di pagina contenuta dell'iFrame? controlla chi è il document dentro la funzione.

document.getElementById('blockrandom') ti restituisce qualcosa? ovvero l'elemento viene trovato?

**djmax73** · 23-10-2009, 11:04

anche io ho lo stesso problema, mi ritrovo con errore javascript su

document.getElementById('blockrandom')

mi dice che non riesce a trovare l'oggetto... eppure l'iframe esiste, e ha l'id corretto ...

**Gluck74** · 23-10-2009, 12:35

vuol dire che la funzione iFrameHeight agisce all'interno dell'iframe, che viene considerato una window.

provate a trasformare la riga

codice:

document.getElementById('blockrandom')

in

codice:

window.parent.document.getElementById('blockrandom')

ciao

**djmax73** · 23-10-2009, 12:53

Originariamente inviato da Gluck74
vuol dire che la funzione iFrameHeight agisce all'interno dell'iframe, che viene considerato una window.

provate a trasformare la riga

codice:

document.getElementById('blockrandom')

in

codice:

window.parent.document.getElementById('blockrandom')

ciao

io ho già provato dentro e fuori dall'iframe, anche con altri tipi di funzioni di autoresize ...
con IE7 tutto ok.
con firefox (versione 3.5.3) la height dell'iframe mi risulta sempre 0 ...

la cosa strana è che su un altro sito uso questo qui sotto e funziona benissimo, sia su IE che su firefox ...

codice:

<iframe src="test1.htm" id="contentFRM" marginwidth="0" marginheight="0" scrolling="no" frameborder="1">
</iframe>

.....

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
function autofitIframe(id){ // v.1.0
//copyright 2004 Eddie Traversa http://www.dhtmlnirvana.com/
if (!window.opera && !document.mimeType && document.all && document.getElementById){
parent.document.getElementById(id).style.height=this.document.body.offsetHeight+"px";
}
else if(document.getElementById) {
parent.document.getElementById(id).style.height=this.document.body.scrollHeight+"px"
}
}
</script>

<body onload="autofitIframe('contentFRM')">

<h3>This is page 1 </h3>


this is some text. this is some text. this is some text. </p>


this is some text. this is some text. this is some text. </p>


this is some text. this is some text. this is some text. </p>


this is some text. this is some text. this is some text. </p>


this is some text. this is some text. this is some text. </p>


this is some text. this is some text. this is some text. </p>

</body>
</html>

**djmax73** · 27-10-2009, 13:59

allora, dopo lunghe ricerche ho trovato questo script
da mettere nella <head>
autodimensiona tutti gli iframe della pagina a seconda del loro contenuto ...

codice:

[B]
<script type="text/javascript">  
/* iFrame SSI IV - iframe auto-resize height script
 * ©2008 John Davenport Scheuer
 * This notice must remain for legal use. */
 
function sizeFrame(){
if(document.getElementsByTagName('frameset').length||!document.getElementsByTagName('iframe').length)
return;
var frEls=document.getElementsByTagName('iframe'), s='scrollHeight',
frObs=window.frames, o='offsetHeight', b='body', de='documentElement';
for (var cs, hb, hd, d='document', i = frEls.length-1; i > -1; --i){
if(frObs[i][d][b].style.overflow)
cs=frObs[i][d][b].style.overflow;
frObs[i][d][b].style.overflow='hidden';
frEls[i].height=10;
frEls[i].height=Math.max(frObs[i][d][b][o], Math.max(frObs[i][d][de][o],
(hd=frObs[i][d][de][s]) != (hb=frObs[i][d][b][s])? Math.max(hd, hb):0))+
(frEls[i].height==frEls[i].offsetHeight&&frEls[i].getAttribute('frameborder',0)!=='0'?4:0);
frObs[i][d].style.overflow=typeof cs=='string'? cs : '';
};

if(!sizeFrame.setup){
for (var i = frEls.length-1; i > -1; --i)
sizeFrame.loadup(frEls[i]);
sizeFrame.setup=true;
}};
 
sizeFrame.loadup=function(o){
if ( typeof window.addEventListener != "undefined" )
o.addEventListener( "load", sizeFrame, false );
else if ( typeof window.attachEvent != "undefined" )
o.attachEvent( "onload", sizeFrame );
else {
if ( o.onload != null ) {
var oldOnload = o.onload;
o.onload = function(e) {
oldOnload(e);
sizeFrame();
};
}
else
o.onload = sizeFrame;
}};
 
if(document.getElementsByTagName&&window.frames)
sizeFrame.loadup(window);
 
</script>

funziona con IE, Firefox, Opera
....
ma non con Chrome

eventuali suggerimenti sono ben accetti

**indacoravenna** · 23-11-2009, 13:54

Originariamente inviato da djmax73
allora, dopo lunghe ricerche ho trovato questo script
da mettere nella <head>
autodimensiona tutti gli iframe della pagina a seconda del loro contenuto ...

codice:

[B]
<script type="text/javascript">  
/* iFrame SSI IV - iframe auto-resize height script
 * ©2008 John Davenport Scheuer
 * This notice must remain for legal use. */
 
function sizeFrame(){
if(document.getElementsByTagName('frameset').length||!document.getElementsByTagName('iframe').length)
return;
var frEls=document.getElementsByTagName('iframe'), s='scrollHeight',
frObs=window.frames, o='offsetHeight', b='body', de='documentElement';
for (var cs, hb, hd, d='document', i = frEls.length-1; i > -1; --i){
if(frObs[i][d][b].style.overflow)
cs=frObs[i][d][b].style.overflow;
frObs[i][d][b].style.overflow='hidden';
frEls[i].height=10;
frEls[i].height=Math.max(frObs[i][d][b][o], Math.max(frObs[i][d][de][o],
(hd=frObs[i][d][de][s]) != (hb=frObs[i][d][b][s])? Math.max(hd, hb):0))+
(frEls[i].height==frEls[i].offsetHeight&&frEls[i].getAttribute('frameborder',0)!=='0'?4:0);
frObs[i][d].style.overflow=typeof cs=='string'? cs : '';
};

if(!sizeFrame.setup){
for (var i = frEls.length-1; i > -1; --i)
sizeFrame.loadup(frEls[i]);
sizeFrame.setup=true;
}};
 
sizeFrame.loadup=function(o){
if ( typeof window.addEventListener != "undefined" )
o.addEventListener( "load", sizeFrame, false );
else if ( typeof window.attachEvent != "undefined" )
o.attachEvent( "onload", sizeFrame );
else {
if ( o.onload != null ) {
var oldOnload = o.onload;
o.onload = function(e) {
oldOnload(e);
sizeFrame();
};
}
else
o.onload = sizeFrame;
}};
 
if(document.getElementsByTagName&&window.frames)
sizeFrame.loadup(window);
 
</script>

funziona con IE, Firefox, Opera
....
ma non con Chrome

eventuali suggerimenti sono ben accetti

potresti scrivermi anche il codice dell'iFrame e se nel body devo richiamare qualche funzione? Ho fatto un semplice copia/incolla dello script ma non funziona.

Grazie

**djmax73** · 23-11-2009, 14:08

Originariamente inviato da indacoravenna
potresti scrivermi anche il codice dell'iFrame e se nel body devo richiamare qualche funzione? Ho fatto un semplice copia/incolla dello script ma non funziona.

Grazie

l'hai messo tra i tag ??

<head>
......
</head>

perchè non c'è alcuna funzione da richiamare ... dovrebbe funzionare

per chrome uso questo (da mettere nell'iframe) :

codice:

function autofitIframe(id)
{

var altezza = 0; //NUMERICO (per calcolare i 10 pixel in più dell'altezza del contenuto dell'iframe)
var altz=""; //STRINGA (Per assegnazione finale a style.height dell'iframe)
browser = "";
browser = navigator.userAgent;
	if (!document.mimeType && document.all && document.getElementById)
			{
			 altezza=parseFloat(parseFloat(this.document.body.offsetHeight) + 0);
			 altz=altezza.toString();
			parent.document.getElementById(id).style.height=altz+"px";
			}
	else if(document.getElementById)
			{
			 altezza=parseFloat(parseFloat(this.document.body.scrollHeight) + 0);
			 altz=altezza.toString();
			parent.document.getElementById(id).style.height=altz+"px";
			}		
}				
</script>

</head>
<body onload="autofitIframe('nomeiframe');">

se vuoi vedi qui :pagina con iframes

gli iframe sono i menu laterali .....

**indacoravenna** · 23-11-2009, 15:36

mmm purtroppo proprio non funziona, neppure su IE, ma penso di aver capito il motivo...secondo te è possibile che sia perchè carico una pagina esterna e tra l'altro dinamica?

soluzioni?

**djmax73** · 23-11-2009, 16:56

si, potrebbe essere quello il problema, lo script magari funziona solo se gli iframes sono sullo stesso dominio ...
prova a googolare :

iFrame SSI IV - iframe auto-resize height script

(è il nome dello script, magari trovi qualcuno che l'ha usato con iframes esterni come nel tuo caso. ...)

Discussione: iframe che si adatta in altezza

Strumenti discussione

Ricerca discussione

Visualizza

iframe che si adatta in altezza

problema con firefox

codice

Re: codice

Re: Re: codice

Re: Re: Re: codice

...

Permessi di invio