lunes, 28 de noviembre de 2011

Llamar función de ventana padre desde iframe en Fancybox

Para poder llamar una función de la página padre desde un iframe es necesario agregar una función al plugin.
Primero, descargamos el plugin desde su sitio web.

El archivo a modificar debe ser:
jquery.fancybox-1.3.4.js

Agregaremos la función myCustomCallback, la pondremos al final, después de la declaración de defaults:


//....

$.fn.fancybox.defaults = {
//...
};
/*=========================================================*/
$.fancybox.myCustomCallback = function(param) {

selectedOpts.customCallbackObject.proccessOperation(param);

};
/*========================================================*/

//...



Crearemos nuestros ejemplos usando jquery en su versión actual, aunque la que viene con fancybox también sirve.

Código de la ventana padre:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Parent Window</title>
<script type="text/javascript" src="./jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript">
$(document).ready(function(){

var myRefObject = {};
myRefObject.proccessOperation = function(param){
SetContainer(param);
};

$(".fancybox-iframe").fancybox({
'type': 'iframe',
'customCallbackObject': myRefObject
});
});

function SetContainer(param)
{
$("#container").append("<p><strong>" + param + "</strong></p>");
}
</script>
</head>
<body>
<div class="">
<a href="ChildWindow.html" class="fancybox-iframe">
Mostrar página hija en un iframe
</a>
</div>

<div id="container">

</div>
</body>
</html>



Código de la ventana que será levantada en un iframe:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Child Window</title>
<script type="text/javascript">
function SendMessageToParentWindow()
{
var message = document.getElementById("txtMessage").value;
parent.$.fancybox.myCustomCallback(message);
}
</script>
</head>
<body>
<div class="">
<label for="txtMensaje">Escribe un texto</label>
<input type="text" id="txtMessage" />
</div>

<div>
<a href="javascript:SendMessageToParentWindow()">
Enviar mensaje a la página padre
</a>
</div>

</body>
</html>



Lo que hacemos es enviarle la referencia(los objetos son tipos de referencia) al objeto myRefObject que sí tiene acceso al método SetContainer() y por tanto lo ejecuta.

Captura:

No hay comentarios:

Publicar un comentario en la entrada