scroll de iframe a la pagina entera

ernanillo · #1 (**permalink**) 15/09/2010, 18:05

Hola wenas, estoy creando un apagina web en la cual el cuerpo de la misma va por iframe, para evitar que la cabecera no se refresque cada vez que se pinche en un enlace, pero el scroll solo lo hace al iframe. Hay alguna forma de que envez de qu ese mueva el iframe se mueva toda la pagina?

Gracias

ernanillo · #2 (**permalink**) 16/09/2010, 14:10

nadie sabe??

DigInDreams · #3 (**permalink**) 16/09/2010, 15:04

No entendi muy bien.

ernanillo · #4 (**permalink**) 17/09/2010, 14:41

a ver, tengo el encabezado y el cuerpo. El cuerpo es un div y dentro del div hay un iframe, lo que pasa esk el scroll lo hace solo al iframe, y quiero hacerselo a la pagina entera, es decir, que no baje solo el cuerpo o iframe, al bajar la pagina, sino que baje la pagina entera, incluyendo el encabezado, por si os es más facil, aki os dejo el codigo:

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="Scripts/cuerpo.js" type="text/javascript"></script>
<script src="http://s6.myradiostream.com/unlock/jquery.js" type="text/javascript"></script>
<script src="http://s6.myradiostream.com/unlock/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
function MM_effectShake(targetElement)
{
	Spry.Effect.DoShake(targetElement);
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle)
{
	Spry.Effect.DoHighlight(targetElement, {duration: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});
}
//-->
</script>

</head>
<body onload="djs.html">
<div id="cabecera">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','780','height','237','title','cabecera','src','0042','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','0042' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="780" height="237" title="cabecera">
    <param name="movie" value="0042.swf" />
    <param name="quality" value="high" />
    <embed src="0042.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="780" height="237"></embed>
</object>
</noscript>
</div>
<div id="cabecera1"></div>
<div id="cabecera2"></div>
<div id="cabecera3"></div>
<div id="cabeceramenu"></div>
<div id="menu1">
<div id="barra"><img src="images/MENU.png" width="174" height="49" /></div>
<div id="li1"><a onclick="javascript: MM_effectShake('li1'); Borrar(); Home();MM_effectAppearFade('cuerpo', 1000, 0, 100, false)" onmouseover="MM_effectHighlight('li1', 1000, '#FFFFFF', '#E11919', '#E11919', false)"><font color="#000000">&diams;</font> Inicio</a></div>
<div id="li2"><a onclick="javascript: MM_effectShake('li2'); Borrar(); Djs();MM_effectAppearFade('cuerpo', 1000, 0, 100, false)" onmouseover="MM_effectHighlight('li2', 1000, '#FFFFFF', '#E11919', '#E11919', false)"><font color="#000000">&diams;</font> Dj's</a></div>

</div>
<div id="unlock"><img src="http://s6.myradiostream.com/unlock/19686.png" height="0" width="0" /></div>
<div id="radio">
  <div id="playerswf" style="border: 0pt none ; padding: 0pt; display: inline-block; width: 180px; height: 50px; background-image: url(images/fondoradio.gif);">
  <object height="50" width="180" style="vertical-align:middle">
    <param name="movie" value="http://bellonline.co.uk/player/player.swf?url=http://s6.myradiostream.com:/19686/;&autoplay=1&title=" />
    <param name="wmode" value="transparent" />
    <embed src="http://bellonline.co.uk/player/player.swf?url=http://s6.myradiostream.com:19686//;&autoplay=1&title=" wmode="transparent" type="application/x-shockwave-flash" height="50" width="180"></embed>
  </object>
  Estado de la radio:
  <script type="text/javascript" src="http://shoutcast.mixstream.net/js/status/uk6-free:19686">
You appear to have javascript turned off.

</script>
<img src="http://shoutcast.mixstream.net/status/uk6-free:19686.gif" alt="Stream status" width="17" height="17" align="absmiddle">
</div> 
</div>
<div id="cuerpo">
  <iframe src="home.html"  width="100%" height="100%" style="border:hidden; overflow:auto" frameborder="0"></iframe>
</div>
</body>
</html>

Milen · #5 (**permalink**) 17/09/2010, 20:50

Bueno, hace tiempo tuve ese problema y lo solucione con las funciones javascript:

Código Javascript:

Ver originalfunction resizeIframe(ID,NOMBRE){
    
    document.getElementById(ID).height=null;
    document.getElementById(ID).width=null;
    var m=getWindowData(NOMBRE,ID); 
    document.getElementById(ID).height=m[5];
    document.getElementById(ID).width=m[4]+22;
    
}
 
function getWindowData(n,i){
    
    var ifr=document.getElementById(i).contentWindow.document || document.getElementById(i).contentDocument;
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
    if (typeof window.frames[n].innerWidth != 'undefined'){
        widthViewport= window.frames[n].innerWidth;
        heightViewport= window.frames[n].innerHeight;
    }else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){
        widthViewport=ifr.documentElement.clientWidth;
        heightViewport=ifr.documentElement.clientHeight;
    }else{
        widthViewport= ifr.getElementsByTagName('body')[0].clientWidth;
        heightViewport=ifr.getElementsByTagName('body')[0].clientHeight;
    }
    xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLeft);
    yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop);
    widthTotal=Math.max(ifr.documentElement.scrollWidth,ifr.body.scrollWidth,widthViewport);
    heightTotal=Math.max(ifr.documentElement.scrollHeight,ifr.body.scrollHeight,heightViewport);
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
    
}

y el tag del iframe debe ser algo así:

Código HTML:

Ver original<iframe name="principal" id="principal" src="main.html" frameborder="0" scrolling="no" onload="resizeIframe('principal','principal');"></iframe>

Espero te funcione y tmb espero no haber olvidado nada. Suerte!

ernanillo · #6 (**permalink**) 18/09/2010, 14:08

jaja gracias me ha funcionado perfectamente, pero ahora me surge otro problema, al lado tengo como una barra de menú la cual el fondo es una imagen que se repite en eje vertical, pero nose porque no me sale hasta el fondo de la pagina, se corta a mitad, el css lo tengo asi:

Código:

#menu1 {
	width: 200px;
	height: 100%;
	background: url(images/M1.gif) top center repeat-y;
	position: absolute;
	left: 0px;
	top: 270px;
	z-index: 0;	
	bottom: 0px;
}

ernanillo · #7 (**permalink**) 19/09/2010, 14:02

despues me acabo de dar cuenta de otro fallo. Para cambiar la pagina, llamo a un javascript, pero al agregar esa funcion no funciona el boton. Asi es como lo hago:

Código:

function Borrar()
{
	divId=document.getElementById('cuerpo');
	divId.innerHTML='';
}
function Home()
{
	divId=document.getElementById('cuerpo');
	divId.innerHTML='<iframe id="home" name="home" src="home.html" width="100%" height="100%" style="border:hidden; overflow:hidden" onload="resizeIframe('home','home');"></iframe>';
}

Y despues en el boton:

Código:

<div id="li1"><a onclick="javascript: MM_effectShake('li1'); Borrar(); Home();MM_effectAppearFade('cuerpo', 1000, 0, 100, false)" onmouseover="MM_effectHighlight('li1', 1000, '#FFFFFF', '#E11919', '#E11919', false)"><font color="#000000">&diams;</font> Inicio</a></div>

jomaruro · #8 (**permalink**) 24/09/2010, 12:27

Hola:

Yo lo que no entiendo es ¿Para que usas un iframe si después quieres scroll en toda la página?

Saludos.

ngollum · #9 (**permalink**) 02/07/2011, 17:21

Buenas,
He probado el código y no me ha fucionado, os dejo el código de mi página:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<title>Pagina principal</title>
<script language="JavaScript">
function resizeIframe(ID,NOMBRE){

document.getElementById(ID).height=null;
document.getElementById(ID).width=null;
var m=getWindowData(NOMBRE,ID);
document.getElementById(ID).height=m[5];
document.getElementById(ID).width=m[4]+22;

}

function getWindowData(n,i){

var ifr=document.getElementById(i).contentWindow.docum ent || document.getElementById(i).contentDocument;
var widthViewport,heightViewport,xScroll,yScroll,width Total,heightTotal;
if (typeof window.frames[n].innerWidth != 'undefined'){
widthViewport= window.frames[n].innerWidth;
heightViewport= window.frames[n].innerHeight;
}else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){
widthViewport=ifr.documentElement.clientWidth;
heightViewport=ifr.documentElement.clientHeight;
}else{
widthViewport= ifr.getElementsByTagName('body')[0].clientWidth;
heightViewport=ifr.getElementsByTagName('body')[0].clientHeight;
}
xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLef t);
yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop) ;
widthTotal=Math.max(ifr.documentElement.scrollWidt h,ifr.body.scrollWidth,widthViewport);
heightTotal=Math.max(ifr.documentElement.scrollHei ght,ifr.body.scrollHeight,heightViewport);
return [widthViewport,heightViewport,xScroll,yScroll,width Total,heightTotal];

}
</script>

</head>
<body>
<iframe scrolling="no" frameborder="0" id="bloque_izquierdo" name="bloque_izquierdo" class="bloque_izquierdo" onload="resizeIframe('bloque_izquierdo','bloque_iz quierdo');"></iframe>

<div class="division_lateral" style="left:11.8em;"></div>

<iframe scrolling="no" frameborder="0" id="bloque_central" name="bloque_central" class="bloque_central" onload="resizeIframe('bloque_central','bloque_cent ral');"></iframe>

<div class="division_lateral" style="left:50.5em;"></div>

<iframe scrolling="no" frameborder="0" id="bloque_derecho" class="bloque_derecho" onload="resizeIframe('bloque_derecho','bloque_dere cho');"></iframe>

</iframe>

</body>
</html>

Podéis decirme dónde está el fallo??
Muchísimas gracias!!!