Como cambiar anchura de iframe?

[netkuup]

Holas, soy un poco novato en javascript, y tengo un pequeño problema.

Tengo un archivo (index.html) con dos iframes (iframe1 y iframe2). Desde la pagina de dentro de iframe1 quiero cambiar el ancho de iframe2.

Si pongo este código funciona bien, me dice: 700 (que es el ancho actual del iframe2)

Código:

var valor_actual = parent.document.getElementById('iframe2').width;       
alert(valor_actual);

Pero quiero hacer un boton para cambiar el ancho del iframe2 a 200px, lo he intentado de estas formas, pero ninguna funciona

Código:

parent.document.getElementById('iframe2').width=200;
parent.document.getElementById('iframe2').width=200+"px";
parent.document.getElementById('iframe2').width="200";
parent.document.getElementById('iframe2').width="200px";
parent.document.getElementById('iframe2').style.width=200;
parent.document.getElementById('iframe2').style.width=200+"px";
parent.document.getElementById('iframe2').style.width="200";
parent.document.getElementById('iframe2').style.width="200px";

Alguien me podría decir como se hace?

Gracias ^^

[IsaBelM]

estás seguro que

parent.document.getElementById('iframe2').width=20 0;
parent.document.getElementById('iframe2').width=20 0+"px";
parent.document.getElementById('iframe2').width="2 00";
parent.document.getElementById('iframe2').width="2 00px";

no funciona??

[netkuup]

Lo he intentado otra vez, pero no, no funciona..

[IsaBelM]

muestra el html y js

[netkuup]

He querido resumir el código porque pensaba que el problema estaría ahy, ya que el valor de ancho me lo da correctamente, pero talvez no es así.

Hay tres iframes. Desde el iframe1 intento cambiar el ancho del iframe 2.

De la manera que está echo, los iframes también se pueden cambiar de tamaño haciendo click en la linea que los separa y arrastrando con el ratón.

Código index.html

Código:

<frameset rows="62,*" id="uno">
   
	<FRAME id="iframe1" src="iframe1.html" >
         
	<FRAMESET cols="40%,*" id="dos">
		<FRAME id="iframe2"  src="http://google.es">
		<FRAME id="iframe3"  src="http://google.es">	
	</FRAMESET>

</frameset>

Código iframe1.html

Código:

<script language="JavaScript">
  function obtener_ancho(){
    var valor_actual = parent.document.getElementById('iframe2').width;       
    alert(valor_actual);
  }
  
  function cambiar_ancho(){
    parent.document.getElementById('iframe2').width=200;
    //parent.document.getElementById('iframe2').width=200+"px";
    //parent.document.getElementById('iframe2').width="200";
    //parent.document.getElementById('iframe2').width="200px";
    //parent.document.getElementById('iframe2').style.width=200;
    //parent.document.getElementById('iframe2').style.width=200+"px";
    //parent.document.getElementById('iframe2').style.width="200";
    //parent.document.getElementById('iframe2').style.width="200px";
      
  }
  </script>
  
  <input type="button" value="obtener ancho" onClick="obtener_ancho();">
  <input type="button" value="cambiar ancho" onClick="cambiar_ancho();">

PD: Si hago (parent.document.getElementById('dos').cols="200,* ";) funciona, el problema es que si modifico el tamaño de los iframes haciendo click con el ratón en la linea que los separa y arrastrando, este valor no cambia, y por lo tanto, cuando le vuelvo a dar para que el ancho sea 200px, se queda tal como está, pero en cambio, el valor 'width' del iframe2 si que cambia cuando modifico el tamaño del iframe con el ratón.

[IsaBelM]

cuando invocas a la función cambiar_ancho() lo que haces es que modificas el dom. pero, a diferencia de los iframe, los frame te da la opción de poder modificar su alto y ancho, pero esto no quiere decir que hayas modificado el dom.
si en un principio modificas el frame con un ancho de 200px y compruebas si ha cambiado el dom (parent.document.getElementById('iframe2').width) verás que sí, por que lo que lee es la propiedad atributo width. pero si ahora agrandas el frame manualmente y vuelves a comprobar su ancho, te seguirá diciendo que tiene 200px, por que el atributo continua teniendo 200px

creo es este el problema

[netkuup]

Si, ese es exactamente el problema...

Hay alguna forma de solucionarlo? :S

[IsaBelM]

hasta donde yo sé no es posible

[caricatos]

Hola:

Por curiosidad, has probado con:

parent.frames.dos.cols = "200,*";

Y en la definición usar el atributo name:

<FRAMESET cols="40%,*" id="dos" name="dos">

Saludos

[netkuup]

Iniciado por caricatos

Hola:

Por curiosidad, has probado con:

parent.frames.dos.cols = "200,*";

Y en la definición usar el atributo name:

<FRAMESET cols="40%,*" id="dos" name="dos">

Saludos

Eso ya lo intenté, te explico:

Si al cargar la pagina las columnas están por ejemplo a "50,*" y mas tarde mediante un botón hago que se ejecute (parent.frames.dos.cols = "200,*";) entonces funciona, el frameset se pone a 200px.

Pero

Si al cargar la pagina las columnas están por ejemplo a "50,*", mediante el ratón hago el frameset mas grande y mas tarde mediante un botón hago que se ejecute (parent.frames.dos.cols = "200,*";) entonces NO funciona.

[netkuup]

Ya he conseguido solucionarlo con:

Código:

var ancho_inicial = parent.document.getElementById('iframe2').width; 

function cambiar_ancho_menu(ancho_inicial){
  var ancho_actual = parent.document.getElementById('iframe2').width; 
  var ancho_diferencia = ancho_actual - ancho_inicial;
  var ancho_final = 200 - ancho_diferencia; 
  parent.document.getElementById('dos').cols=ancho_final+",*";
}

Solo podía modificar el ancho del frameset con ( parent.document.getElementById('dos').cols ), y solo podía ver el ancho que quedaba después de modificar el tamaño con el ratón con ( parent.document.getElementById('iframe2').width; ), así que lo he mezclado.

Gracias a todos