Iframe Redimensionable con AJAX – Más Allá del Código

Trabajar con iFrames es una tarea bastante ingrata sobre todo cuando te interesa que el contenedor se adapte al tamaño del contenido.
Buscando por internet encontré unos ejemplos muy interesantes:

El de Microsoft http://support.microsoft.com/kb/278469/es
El de los foros http://www.forosdelweb.com/showthread.php?t=510457

Nos explican como aprovechar el evento onload del BODY para lanzar una función javaScript que recalcule el tamaño.

Pero que pasa si la página del iFrame utiliza Ajax.Net ?????

Pues que como ajax.net carga parcialmente la página no se lanza el evento onload de nuevo.Entonces seguí surfeando por la web y encontré otro artículo muy interesante http://netcodigo.webinfo.es/2007/02/02/controlar-llamadas-asincronas-con-aspnet-ajax/.

Con este artículo conocí la clase PageRequestManager clase encargada de controlar el renderizado parcial de las páginas, tenemos eventos, Métodos y propiedades para proporcionarnos este servicio.

PageRequestManager Class
- Events
  - beginRequest Event
  - endRequest Event
  - initializeRequest Event
  - pageLoaded Event
  - pageLoading Event
- Methods
  - abortPostBack Method
  - dispose Method
  - getInstance Method
- Properties
  - isInAsyncPostBack Property

Realmente muy interesante !!!

se me ocurren un montón de utilidades posibles 😉
Podéis obtener más información en :
http://asp.net/ajax/documentation/live/clientreference/Sys.WebForms/PageRequestManagerClass/default.aspx

Bueno no me desviaré del tema y seguiremos con el ejemplo.

<asp:ScriptManagerID="ScriptManager1" runat="server"
   EnablePageMethods="True">
</asp:ScriptManager>

<scripttype="text/javascript">
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  prm.add_endRequest(Redimensionar);

  onload = function Redimensionar(sender,art)
  {
   top.window.document.getElementById("demoFrame").height =
     document.getElementById("aspnetForm").offsetHeight;
     top.window.document.getElementById("demoFrame").width =
     document.getElementById("aspnetForm").offsetWidth;
  }
</script>

1. Tenemos que activar la propiedad EnablePageMethods=»True» he instanciar la clase PageRequestManager para utilizarla.

var prm = Sys.WebForms.PageRequestManager.getInstance();

2. Asociamos el evento que nos interesa a una función javascript

prm.add_endRequest(Redimensionar);

3. Creamos el script que redimensionará el iFrame.
Para probar el código he creado un proyecto que utiliza una página con un iframe y un update panel.

<iframe frameborder="0" id="demoFrame" marginheight="0"
   marginwidth="0" scrolling="no" src="Pagina1.aspx">
</iframe>

Al clicar el botón se aplica un bucle que aumenta el tamaño de la página.

Muy importante este ejemplo solo funciona con páginas dentro del mismo Dominio como muy bien lo explican en el primer link de Microsoft.

Si queréis bajaros el proyecto lo podéis hacer desde este link. http://lonetcamp.com/Community/files/folders/art/entry54.aspx

Saludos a Todos 🙂

Entradas relacionadas

Deja un comentario Cancelar respuesta