sleopardo / chico-iframe-dinamic

Código para comunicar un iframe con su Parent mediante postMessage

Como usarlo

En el iframe

• Incluir iframe.js (NO requiere Jquery)

  	<script type="text/javascript" src="iframe.js" ></script>

Enviando mensajes

• Cerrar el modal

  	<script>
  		iframeMessenger.post("close");
  	</script>

• Remover boton cerrar (cruz)

  	<script>
  		iframeMessenger.post("remove=close");
  	</script>

• Remover Loading

  	<script>
  		iframeMessenger.post("remove=loading");
  	</script>

• Agregar Loading

  	<script>
  		iframeMessenger.post("add=loading");
  	</script>

  </li>
  <li>
  	<p>Resizear con animacion (ancho, alto, animacion,velocidad)</p>
  	<pre style="word-wrap: break-word; white-space: pre-wrap;">
  &lt;script&gt;
  	iframeMessenger.post("resize=330&250&true&1400");
  &lt;/script&gt;</pre>
  </li>
  <li>
  	<p>Resizear sin animacion (ancho,alto)</p>
  	<pre style="word-wrap: break-word; white-space: pre-wrap;">
  &lt;script&gt;
  	iframeMessenger.post("resize=400&300");
  &lt;/script&gt;</pre>
  </li>
  

En el parent

Links parar abrir el modal:

Deben tener los siguientes atributos:

class="iframe-modal"

Selector para identificar si tiene que abrir modal.

<dt>data-modal:width="number"</dt>
<dd>Define el ancho del modal</dd>

<dt>data-modal:height="number"</dt>
<dd>Define el alto del modal</dd>

<dt>data-modal:url="string"</dt>
<dd>Es la URL que se mostrará en el iframe</dd>

<dt>data-modal:dinamic="boolean"</dt>
<dd>Determina si ese modal recibira mensajes. Valores: true || false</dd>

Ejemplo:

<a href="http://mercadolibre.com.ar" target="_blank" class="iframe-modal" data-modal:width="300" data-modal:height="400" data-modal:url="http://www.mercadolibre.com.ar" data-modal:dinamic="true">Link</a>

En el JS:

• Incluir parent.js (requiere Jquery + ChicoUI)

  <script type="text/javascript" src="parent.js" ></script>

• Instanciar los componentes:

  <pre style="word-wrap: break-word; white-space: pre-wrap;">
  

  <script> iframeMessageCallback.init(); iframeModal.init(iframeMessageCallback); </script>

---

Por default se reconocen los 6 mensajes ya explicados. Para escuchar mas mensajes, pueden crearlos con el método "bind" del componente iframeMessageCallback

Ejemplo:

<script>
	iframeMessageCallback.bind('seLogueo',function() { alert("se logueo"); })
</script>