2010-02-02 14 views
10

Ich versuche hier etwas ähnliches wie die Anwendung von Clipper zu tun http://www.polyvore.com/cgi/clipperSchließen iframe Cross-Domain-

ich die iframe in einer anderen Website (Cross-Domain) erscheinen kann. Aber ich kann den "Schließen" -Knopf nicht zum arbeiten bringen.

Dies ist, was ich verwendet, aber es für Cross-Domain funktioniert nicht (im Grunde das iframe Element entfernen)

window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));  

Können Sie helfen? Vielen Dank.

Antwort

19

Sie sollten eine Bibliothek verwenden, die dies abstrahiert (z. B. http://easyxdm.net/wp/, nicht getestet). Fragment-ID-Messaging funktioniert möglicherweise nicht in allen Browsern, und es gibt bessere Ansätze, z. B. postMessage.

Ihr Beispiel (Clipper) verwendet jedoch einen Hack namens fragment id messaging. Dies kann browserübergreifend sein, vorausgesetzt, die Seite mit Ihrem iframe ist die oberste Ebene. Mit anderen Worten, es gibt insgesamt zwei Ebenen. Im Grunde legt das Kind das Fragment des Elternteils fest, und der Elternteil überwacht dies.

Dies ist ein ähnlicher Ansatz Clipper:

Parent.html

<html> 
<head> 
<script type="text/javascript"> 
function checkForClose() 
{ 
    if(window.location.hash == "#close_child") 
    { 
     var someIframe = document.getElementById("someId"); 
     someIframe.parentNode.removeChild(someIframe); 
    } 
    else 
    { 
     setTimeout(checkForClose, 1000) 
    } 
} 
setTimeout(checkForClose, 1000); 
</script> 
</head> 
<body> 
<iframe name="someId" id="someId" src="child.html" height="800" width="600">foo</iframe> 
</body> 
</html> 

child.html:

<html> 
<head> 
<script type="text/javascript"> 
setTimeout(function(){window.parent.location.hash = "close_child";}, 5000); 
</script> 
<body style="background-color: blue"></body> 
</html> 

EDIT2: domänenübergreifende und unabhängig voneinander gesteuert unterschiedlich sind. Ich habe mich in den (stark verfälschten/verschleierten) Polyvore-Code vertieft, um zu sehen, wie er funktioniert (übrigens nicht in Firefox). Denken Sie daran, dass Bookmarklets, wie der Clipper, im Kontext der geöffneten Seite leben, wenn sie gestartet werden. In diesem Fall a script die Bookmarklet Lasten, die wiederum eine init-Funktion läuft die an iframe erzeugt, sondern auch läuft:

Event.addListener(Event.XFRAME, "done", cancel); 

Wenn Sie in addListener digg, werden Sie feststellen (beautified):

if (_1ce2 == Event.XFRAME) { 
         if (!_1cb3) { 
          _1cb3 = new Monitor(function() { 
           return window.location.hash; 
          }, 
          100); 
          Event.addListener(_1cb3, "change", onHashChange); 
         } 
        } 

abbrechen beinhaltet:

removeNode(iframe); 

, Nun ist die einzige verbleibende Stück ist, dass die iframe page Lasten another script mit einer ClipperForm.init Funktion, der folgendes beinhaltet:

Event.addListener($("close"), "click", function() { 
      Event.postMessage(window.parent, _228d, "done"); 
     }); 

So sehen wir deutlich Fragment ID Messaging sie verwenden.

+0

Dies ist zu kompliziert, über das, was ich brauche. Ich muss nur den Iframe schließen. Irgendein einfacher Weg, es zu tun? Wenn nicht, kannst du ein Beispiel zeigen, wie es das tut?Danke –

+0

Ich habe jedoch keine Kontrolle über das übergeordnete Dokument. Deshalb habe ich "domänenübergreifend" angegeben. Genau wie das Beispiel von Polyvore steuern sie auch nicht die Eltern, aber sie können den iframe immer noch schließen. Seltsam! –

+0

Wie ich gerade oben erklärt habe, kontrollieren/kontrollieren sie den Elternteil, und sie verwenden Fragment-ID-Nachrichten. –

1

Versuchen Sie, den Inhalt des iframe zu verbergen, und sorgen Sie sich nicht darum, das iframe-Element im übergeordneten Element loszuwerden.

+0

Wie verstecken? Ich habe diesen Fehler Berechtigung verweigert für , um Eigenschaft Window.document von zu erhalten. Also im Grunde kann ich keinen Weg finden, etwas mit dem iframe zu tun –

+0

Ich denke, wenn Sie document.style.visibility = none (oder wie auch immer Sie alle Iframe Inhalte ausblenden) auf die Sachen in der Iframe, Sie am Ende mit einem großes weißes Quadrat? In diesem Fall benötigen Sie wahrscheinlich einen Cross-Frame-Kommunikationsmechanismus, wie Matthew Flaschen vorschlägt. Zur gleichen Zeit injizieren Sie den iframe selbst, Sie injizieren auch das Skript, um eine Seite der Kommunikation zu behandeln; und die im iframe geladene Seite hat das Skript, um mit der anderen Seite umzugehen. – Bruce

+0

Versuchsanzeige: keine –

Verwandte Themen