FancyBox iframe gibt Eltern zurück $ als undefined (mit WordPress)

Ich versuche, FancyBox aus dem Iframe zu schließen, aber parent.$ ist immer undefined. Das ist mein 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>

Ersetzen parent.$.fancybox.close(); mit alert('clicked'); funktioniert gut. Ich verstehe nicht, warum parent.$undefined ist, wenn der Iframe in der gleichen Domäne ist.

Ich benutze WordPress 2.9.1, mit der FancyBox für Wordpress-Plugin.

Hauptseite: //server.local/web/test/index.php
iframe Seite: //server.local/web/test/wp-content/plugins/wp-test/test.htm

Die erste dieser URLs ist die Hauptseite, die zweite ist die iframe Seite; server.local ist mein Home Test Server.

Irgendwelche Ideen? Ich kann die gesamte Quelle einfügen, wenn es hilfreich wäre.

Quelle

2010-02-09 Aleksandr

Habe einige Stunden damit verbracht, das zu debuggen und habe nichts erreicht. Also habe ich das Plugin 'FancyBox for WordPress' mit der neuesten Version von FancyBox ausgeschaltet und es wurde behoben. Wirklich sollte das früher versucht haben.

Nachdem ich einige Zeit mit WordPress und seinen verschiedenen Plugins verbracht habe, würde ich empfehlen, die Dinge manuell aufzurufen, anstatt sich auf Plugins zu verlassen. Es fügt nur eine weitere Ebene der Komplexität hinzu, die, wenn Sie wissen, was Sie tun, nicht da sein muss.

Dank Doug für die Hinweis auf die geeignete Syntax für iframe zum übergeordneten Fenster jQuery in WordPress.

Quelle

2010-02-13 04:55:55 Aleksandr

Es ist undefiniert, weil WordPress jQuery im noConflict Modus ausführt. Verwenden Sie stattdessen:

parent.jQuery.fancybox.close();

noConflict Modus bedeutet $ nicht gleich jQuery. Sie müssen jQuery explizit verwenden, um auf das zugreifen zu können, auf das Sie normalerweise mit $ zugreifen können.

Quelle

2010-02-09 07:06:21

Sorry, gesagt haben sollte bin mit, dass ich bewusst bin; Die js, die ich einschloss, war ein Ausschnitt. Ich habe meine Frage so bearbeitet, dass sie dies widerspiegelt - das Übergeben von $ bedeutet, dass ich "jQuery" nicht verwenden muss. – Aleksandr

@Aleksandr Das Übergeben von '$' in einem 'iframe' wirkt sich nicht auf die übergeordnete Seite aus. Tatsächlich fügen Sie eine vollständig separate Instanz von jQuery in den iframe ein. Wenn Sie bemerken, was Sie geschrieben haben, übergeben Sie '$', aber verweisen Sie auf 'parent. $ '. Es ist, als hättest du 'var a = 1; alert (obj.a); 'Sie würden nicht erwarten, dass sich die beiden Elemente auf denselben Wert beziehen, es sei denn, es wurde irgendwo im Code eine Zuweisung zugewiesen. –

Sie haben Recht, das macht Sinn. Mit dem folgenden Code jedoch: 'jQuery ('# cancel'). Click (function() {parent.jQuery.fancybox.close();});' Ich bekomme immer noch 'undefined' Fehler in Firebug:' parent. jQuery.fancybox ist nicht definiert'. Hast du eine Idee, warum das so sein könnte? Vielen Dank für Ihre Hilfe bis jetzt! Ich bin immer noch sehr neu in JavaScript und Codierung im Allgemeinen. – Aleksandr

Dies funktioniert für mich;)

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

Dank für diesen Beitrag, es mir eigentlich ein wenig geführt ... Ich fühle mich schlecht, weil es mir eine nur wenige Minuten in Anspruch nahm, und ich weiß, wie frustrierend Fancybox für Wordpress ist !!

Quelle

2010-07-13 04:21:13 Michael

HALLO, Wer Probleme hat, ist ein Fancy Box iFrame Schließen einer manuell mit installieren von Fancy Box in Wordpress 3.0:

Verwenden Sie diesen Link in Ihrem iframe:

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

Es funktioniert :)

Quelle

2010-07-16 11:28:33 dave

Keiner der Vorschläge funktionierte für mich. Ich musste es mit dem folgenden Code umgehen. Die neueste Version unterstützt möglicherweise die Datei parent.jQuery.fancycox.close(); Ansatz, aber die älteren Versionen funktionieren damit nicht.

Für bestehende Websites mit älteren Versionen der Plugins/JQuery, versuchen Sie diese

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

Sie könnten die Funktion close_window innerhalb des Inhalts Iframe deklarieren und verwenden. ..

Quelle

2010-08-10 06:54:49

Ich hatte dies zu tun:

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

Got Typ Fehler vor.

Quelle

2011-05-09 21:59:49 TOBlender

Alle Variationen von parent.fancybox.close() funktionierte nicht für mich, muss einige lib-Konflikt sein.

hier ist meine Arbeit Workaround für neueste fancybox, sollten Sie CSS Display-Eigenschaft statt. Hide() -Methode wie in diesem Fall fancybox wird nicht wieder öffnen.

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

Quelle

2011-05-15 23:32:06 stasl

Beste Hack aller Zeiten. Vielen Dank! – AimanB

Meine Antwort bezieht sich nicht auf WordPress, aber eine für fancybox im Allgemeinen.

im iframe, wenn Sie das Haupt jquery Skript enthalten sind (jquery-1.5.2.min.js), dann wird es mit dem auf der Hauptseite in Konflikt geraten, und Eltern. $. Fancybox wird nicht Arbeit in diesem Fall.

andere jquery verwandte Sachen (wie für zB: die Tabs) funktionieren innerhalb des iframe. daher wird es einem Anfänger-Programmierer nicht einfallen, dass das zweite jquery-Skript im iframe der Bösewicht ist.

Quelle

2011-09-02 00:56:19

Dies ist eine äußerst nützliche Information. – dangermark

Ich hatte das gleiche Problem und bemerkte, dass ich nicht die

type:'iframe'

Wenn die fancybox Aufruf es mein Problem gelöst

Quelle

2012-01-20 07:53:08

FancyBox iframe gibt Eltern zurück $ als undefined (mit WordPress)

Antwort

Verwandte Themen