2010-02-09 17 views
9

Estoy tratando de cerrar FancyBox desde dentro del iframe, pero parent.$ es siempre undefined. Este es mi iframe JavaScript:

<script type='text/javascript' 
    src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'> 
</script> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
    (function($) { 
     $.fn.closeFancyBox = function() { 
      $(this).click(function() { 
       parent.$.fancybox.close(); 
      }); 
     }; 
     })(jQuery); 
     $('#cancel').closeFancyBox(); 
     }); 
}); 
</script> 

Sustitución parent.$.fancybox.close(); con alert('clicked'); funciona bien. No entiendo por qué parent.$ es undefined cuando el iframe está en el mismo dominio.

Estoy usando WordPress 2.9.1, con el complemento FancyBox for Wordpress.

  • página principal: página //server.local/web/test/index.php
  • iframe: //server.local/web/test/wp-content/plugins/wp-test/test.htm

La primera de estas URL es la página principal, el segundo es la página de iframe; server.local es el servidor de prueba de mi casa.

¿Alguna idea? Puedo pegar la fuente completa si fuera útil.

Respuesta

0

Pasé bastantes horas intentando depurar esto y no conseguí nada. Así que cambié el complemento 'FancyBox for WordPress' con la última versión de FancyBox, y se solucionó. Realmente debería haber intentado eso antes.

Después de haber pasado algún tiempo con WordPress y sus diversos complementos, recomendaría llamar cosas manualmente en lugar de depender de los complementos. Simplemente agrega otra capa de complejidad que, si sabe lo que está haciendo, no necesita estar allí.

Gracias a Doug por señalar la sintaxis adecuada para iframe para parent window jQuery en WordPress.

7

No está definido porque WordPress ejecuta jQuery en el modo noConflict. Use este lugar: significa

parent.jQuery.fancybox.close(); 

noConflict modo $ no es igual a jQuery. Debe usar explícitamente jQuery para acceder a lo que normalmente puede acceder con $.

+0

Lo sentimos, debería haber dicho que soy consciente de ello; el js que incluí fue un fragmento. He editado mi pregunta para reflejar esto: pasar $ significa que no tengo que usar 'jQuery'. – Aleksandr

+0

@Aleksandr Pasar '$' en un 'iframe' no afectará en absoluto a la página principal. De hecho, está incluyendo una instancia completamente separada de jQuery en 'iframe'. Si observa lo que escribió, pasa '$', pero hace referencia 'parent. $'. Es como si tuvieras 'var a = 1; alert (obj.a); 'No esperaría que los dos elementos se refirieran al mismo valor a menos que hubiera una asignación en alguna parte del código. –

+0

Tienes razón, eso tiene sentido. Sin embargo, utilizando el siguiente código: 'jQuery ('# cancel'). Haga clic en (función() {parent.jQuery.fancybox.close();});' Todavía obtengo errores 'undefined' en Firebug:' parent. jQuery.fancybox no está definido'. ¿Tienes alguna idea de por qué esto podría ser? ¡Gracias por su ayuda hasta ahora! Todavía soy muy nuevo en JavaScript y codificación en general. – Aleksandr

2

Esto funciona para mí;)

<a href="javascript:parent.jQuery.fn.fancybox.close();" > 

Gracias por este post, lo que realmente me ha guiado un poco ... me siento mal porque me llevó a sólo unos minutos y yo sabemos lo frustrante para FancyBox Wordpress es !!

0

HI, Cualquier persona que está teniendo problemas para cerrar una caja de lujo marco flotante utilizando un manual de instalación de Fancy Box en Wordpress 3.0:

Use este enlace en su iframe:

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a> 

Funciona :)

1

Ninguna de las sugerencias funcionó para mí. Tuve que trabajar con el siguiente código. La última versión puede ser compatible con parent.jQuery.fancybox.close(); enfoque, pero las versiones anteriores no funcionan con eso.

Para los sitios existentes con las versiones anteriores de los plugins/Jquery, prueba este

function close_window() 
{ 
$("#fancy_outer",window.parent.document).hide(); 
$("#fancy_overlay",window.parent.document).hide(); 
//window.top.window.$.fancybox.close(); this also does not work :(
} 

que podría declarar y utilizar la función de close_window dentro del contenido de marco flotante. ..

2

que tenía que hacer esto:

window.top.window $ fancybox.close();

Obtuvo error de tipo antes.

3

Cualquier variación de parent.fancybox.close() no funcionó para mí, debe haber algún conflicto de lib.

he aquí mi solución de trabajo para la última fancybox, debe usar la propiedad css display en lugar del método .hide() ya que en ese caso fancybox no volverá a abrirse.

parent.jQuery('#fancybox-overlay').css('display', 'none'); 
parent.jQuery('#fancybox-wrap').css('display', 'none'); 
+0

Mejor hack nunca. ¡Gracias! – AimanB

3

Mi respuesta no está relacionada con wordpress, sino con fancybox en general.

en el iframe, si ha incluido la secuencia de comandos de jQuery principal (jquery-1.5.2.min.js), entonces se entrará en conflicto con el de la página principal, y padres. $. FancyBox no lo hará trabajar en este caso.

otras cosas relacionadas con jquery (como por ejemplo: las pestañas) funcionarán dentro del iframe. por lo tanto, no se le ocurrirá a un programador novato que el segundo guión jquery dentro del iframe es el villano.

+0

Esta es información extremadamente útil. – dangermark

1

que tenían el mismo problema y se dio cuenta de que no estoy utilizando el

type:'iframe' 

Al llamar a la FancyBox, resolvió mi problema

Cuestiones relacionadas