2010-02-09 7 views
9

Je suis en train de fermer FancyBox à partir de l'iframe, mais parent.$ est toujours undefined. Ceci est mon 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> 

Remplacement parent.$.fancybox.close(); avec alert('clicked'); fonctionne très bien. Je ne comprends pas pourquoi parent.$ est undefined lorsque l'iframe est dans le même domaine. J'utilise WordPress 2.9.1, avec le plugin FancyBox pour Wordpress.

  • page principale: //server.local/web/test/index.php
  • page iframe: //server.local/web/test/wp-content/plugins/wp-test/test.htm

Le premier de ces URL est la page principale, la seconde est la page d'iframe; server.local est mon serveur de test à domicile.

Des idées? Je peux coller toute la source si cela peut être utile.

Répondre

0

J'ai passé quelques heures à essayer de déboguer ce problème et je n'ai obtenu aucun résultat. J'ai donc désactivé le plugin 'FancyBox for WordPress' avec la dernière version de FancyBox, et il a été corrigé. Vraiment aurait dû essayer cela plus tôt.

Après avoir passé du temps avec WordPress et ses différents plugins, je vous recommande d'appeler les choses manuellement plutôt que de se fier aux plugins. Cela ajoute simplement une autre couche de complexité qui, si vous savez ce que vous faites, n'a pas besoin d'être là.

Merci à Doug d'avoir indiqué la syntaxe appropriée pour iframe à la fenêtre parent jQuery dans WordPress.

7

Il est indéfini car WordPress exécute jQuery en mode noConflict. Utilisez ceci:

parent.jQuery.fancybox.close(); 

en mode noConflict signifie $ ne est pas égal jQuery. Vous devez utiliser explicitement jQuery pour accéder à ce que vous pouvez normalement accéder avec $.

+0

Désolé, aurait dit que je suis au courant de cela; le js que j'ai inclus était un extrait. J'ai édité ma question pour refléter cela - en passant $ signifie que je n'ai pas besoin d'utiliser 'jQuery'. – Aleksandr

+0

@Aleksandr Passer '$' dans un iframe n'a aucune incidence sur la page parente. En fait, vous incluez une instance complètement séparée de jQuery dans le 'iframe'. Si vous remarquez ce que vous avez écrit, vous passez '$', mais référencez 'parent. $'. C'est comme si vous aviez 'var a = 1; alert (obj.a); 'Vous ne vous attendez pas à ce que les deux éléments se réfèrent à la même valeur, à moins qu'il y ait une affectation quelque part dans le code. –

+0

Vous avez raison, cela a du sens. Cependant, en utilisant le code suivant: 'jQuery ('# cancel'). Click (function() {parent.jQuery.fancybox.close();});' Je reçois toujours des erreurs 'undefined' dans Firebug:' parent. jQuery.fancybox est indéfini ». Avez-vous une idée pourquoi cela pourrait être? Merci pour votre aide jusqu'à présent! Je suis encore très novice en JavaScript et en codage en général. – Aleksandr

2

Cela fonctionne pour moi;)

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

Merci pour ce poste, il fait me guider un peu ... Je me sens mal parce qu'il m'a fallu seulement quelques minutes et je sais combien frustrant pour Fancybox Wordpress est !!

0

HI, Toute personne qui a de la difficulté de fermer une boîte iFrame Fancy en utilisant une installation manuelle de Fancy Box dans Wordpress 3.0:

Utilisez ce lien dans votre iframe:

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

Il fonctionne :)

1

Aucune des suggestions n'a fonctionné pour moi. J'ai dû contourner cela en utilisant le code suivant. La dernière version peut supporter le parent.jQuery.fancybox.close(); approche, mais les anciennes versions ne fonctionnent pas avec ça.

Pour les sites existants avec les anciennes versions des plugins/Jquery, essayez cette

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 :(
} 

vous pouvez déclarer et utiliser la fonction close_window dans le contenu Iframe. ..

2

je devais faire ceci:

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

Erreur de type précédente.

3

Toute variation de parent.fancybox.close() ne fonctionnait pas pour moi, doit être un conflit de lib.

Voici ma solution de contournement pour la dernière fancybox, vous devez utiliser la propriété d'affichage css au lieu de la méthode .hide() car dans ce cas, fancybox ne s'ouvrira plus.

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

Meilleur hack jamais. Je vous remercie! – AimanB

3

Ma réponse n'est pas liée à wordpress, mais une pour fancybox en général.

dans le iframe, si vous avez inclus le script principal jquery (jquery-1.5.2.min.js), alors il sera en conflit avec celui sur la page principale, et parents. $. Fancybox ne sera pas travailler dans ce cas.

d'autres choses liées à jquery (comme par exemple: les onglets) fonctionneront à l'intérieur de l'iframe. par conséquent, il ne viendra pas à l'esprit d'un programmeur novice que le deuxième script jquery à l'intérieur de l'iframe est le méchant.

+0

Ceci est une information extrêmement utile. – dangermark

1

J'ai eu le même problème et a remarqué que je ne suis pas en utilisant le

type:'iframe' 

Lorsque vous appelez le fancybox, il a résolu mon problème