¿Cómo cambiar el tamaño de un iframe dentro de la página que contiene?

Question

Quiero acceder al iframe en el que está mi página y cambiar su tamaño. Por cierto, lo estoy haciendo en javascript.

It's something like parent and height or offsetHeight.

<iframe src="mypage.asp" height="400" width="400" ></iframe> 

Y en MiPágina.asp que hacer algo similar como esto:

var h = // new height; 
parent.height = h; 

Pero no es todo ¿verdad? ¿Alguien más que sabe más?

Answer 1

Pruebe esto si quiere cambiar el tamaño del iframe desde la página que está cargada en su iframe. Parece que funciona localmente al menos:

function doIt() { 
    var elem = window.parent.document.getElementById('myIframe'); // the id of your iframe of course 
    elem.style.height = '40em'; 
} 

Asumo tanto la página como el marco flotante son los suyos y tienen el mismo "origen".

Answer 2

Resolvería esto usando window.postMessage. Esto envía un mensaje del iframe a la página principal que contiene el iframe. Luego puede actualizar la altura en el padre. Intentar establecer la altura desde dentro del iframe ofrece unas limitaciones de prevención del XSS del navegador realmente desagradables.

Un buen ejemplo es here:

padres:

// Every two seconds.... 
setInterval(function() { 
    // Send the message "Hello" to the parent window 
    // ...if the domain is still "davidwalsh.name" 
    parent.postMessage("Hello","http://davidwalsh.name"); 
},1000); 

iframe:

// Create IE + others compatible event handler 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

// Listen to message from child window 
eventer(messageEvent,function(e) { 
    console.log('parent received message!: ',e.data); 
},false);