Micaela 14 de enero de 2010 a las 09.03
   Imprimir artículo
elWebmaster.com

jQuery: C贸mo comunicar iframes de dominio cruzado y redimensionarlos


jqueryjQuery postMessage permite la comunicaci贸n window.postMessage de forma f谩cil y sencilla en navegadores que la soportan, cayendo en un m茅todo de comunicaci贸n document.location.hash para todos los otros navegadores.

Con la incorporaci贸n del m茅todo window.postMessage,聽 JavaScript finalmente obtiene un m茅todo fant谩stico para la comunicaci贸n de iframes de dominio cruzado. En esta nota te explicamos c贸mo hacerlo.

Ejemplo

Supongamos que tienes una p谩gina en http://benalman.com/test.html la cual posee un Iframe. Desafortunadamente, el contenido del Iframe se aloja en http://rj3.net/test.html, y debido a las restricciones de seguridad de dominio cruzado, el mensaje “hello world” que el Iframe (hijo) desea enviar a su padre no puede ser recibido.

Bueno, s铆 se puede, pero s贸lo en ciertos navegadores, entre los que por supuesto no se incluye IE7, que sigue siendo el navegador m谩s popular. Con $.postMessage esto no s贸lo es posible, sino que tambi茅n es f谩cil.

Haz clic aqu铆 para visualizar una demo 禄

Procedimiento

Primero, tanto la p谩gina hijo como padre necesitan incluir jQuery como as铆 tambi茅n el plugin jQuery postMessage.

Este c贸digo deber谩 ir en la p谩gina de recepci贸n (padre):

  1. $.receiveMessage(
  2.   function(e){
  3.     alert( e.data );
  4.   },
  5.   'http://rj3.net'
  6. );

B谩sicamente, le avisa a la ventana que debe buscar mensajes, pero s贸lo de ‘http://rj3.net’, y cuando entren, alertarlos.

La p谩gina de env铆o (hija) ejecuta este c贸digo:

  1. $.postMessage(
  2.   'hello world',
  3.   'http://benalman.com/test.html',
  4.   parent
  5. );

En navegadores d贸nde window.postMessage sea soportado, el mensaje ‘hello world’ simplemente se pasa del frame hijo a la ventana padre, y se lleva a cabo la alerta. 隆Muy Simple!

En otros navegadores, la ventana hija setea la locaci贸n de la ventana padre a http://benalman.com/test.html#hello%20world. A聽 pesar del hecho de que la URL completa ha sido seteada, como s贸lo la location.hash fue modificada realmente, el navegador no recarga por completo la p谩gina. En su lugar, el cambio de hash es detectado, se realiza un callback y el mensaje es alertado. Por esta raz贸n, es absolutamente obligatorio que la URL entera de la p谩gina padre sea pasada dentro de $.postMessage como segundo par谩metro. Esta URL podr铆a ser no modificable dentro de la p谩gina de env铆o, o aprobada de forma directa.

Esto se entiende mejor con un ejemplo en vivo, d贸nde un iframe le permite a su padre saber que su contenido ha cambiado, para que el Iframe pueda ser redimensionado.

Notas

  • La referencia MDC window.postMessage es muy 煤til, as铆 que aseg煤rate de revisarla si tienes alguna duda sobre c贸mo funciona el m茅todo.
  • En los navegadores que no soportan window.postMessage, se a帽ade un par谩metro “cache bust” a la location.hash para asegurarse de que los mensajes m煤ltiples secuenciales pero iguales (por ejemplo, como “toggle”) activar谩n cada uno el evento.
  • En navegadores que no soportan window.postMessage, este script puede que entre en conflicto con un fragmento del history del plugin, ya que la location.hash es modificada. Afortunadamente, los hashes que este script crea coinciden con el regexp /^#?\d+&/, as铆 que es posible filtrarlos.
  • En navegadores que no soportan window.postMessage, como polling es utilizado para la detecci贸n de cambios en la location.hash, debe tenerse cuidado para asegurarse de que $.postMessage no sea llamado demasiado r谩pido, o puede que los mensajes se pierdan. Existen m茅todos de no-polling ingeniosos para detectar cambios en la location.hash, pero como requieren Iframes proxy y archivos HTML adicionales, hemos decidido mantener las cosas simples y utilizar polling.

Haz clic aqu铆 para descargar el archivo fuente禄

Haz clic aqu铆 para visualizar una demo 禄

Fuente: Ben Alman


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Tweets that mention jQuery: C贸mo comunicar iframes de dominio cruzado y redimensionarlos - elWebmaster.com -- Topsy.com dice:

    […] This post was mentioned on Twitter by Paola D谩vila and elwebmaster, Abel Rodriguez Lopez. Abel Rodriguez Lopez said: jQuery: C贸mo comunicar iframes de dominio cruzado y redimensionarlos: jQuery postMessage permite […]

  2. Cechen dice:

    Chavo el que dirige este blog es un teso, esto lleva tiempo desarrollar esto Wpu

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder