[Ajax.Net] Iframe Redimensionable

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:



  1. El de Microsoft http://support.microsoft.com/kb/278469/es

  2. 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:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePageMethods=”True”></asp:ScriptManager><script type=”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();


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

prm.add_endRequest(Redimensionar);


  1. 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 🙂 

3 comentarios en “[Ajax.Net] Iframe Redimensionable”

  1. Muchas gracias,
    estaba batallando para disparar un evento en un uploadpanel, pero tu metodo var prm = Sys.WebForms.PageRequestManager.getInstance();
    me ayudo, aunque el resultado final no es el mismo el ejemplo me ayudo bastante.

    Gracias

  2. Hola, me parecio muy bueno tu articulo, pero estoy tratando de bajar el ejemplo y no me deja registrame en el sitio para la descarga, queria saber si existe la posibilidad de que me mandes el ejemplo a mi casilla de correos fpapaseit@yahoo.com.ar, Gracias Fabian

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *