2010-02-02 19 views
10

che sto cercando di fare qualcosa di simile per l'applicazione Clipper qui http://www.polyvore.com/cgi/clipperChiudi iframe cross dominio

posso fare l'iframe apparire in un altro sito web (cross domain). Ma non riesco a far funzionare il pulsante "chiudi".

Questo è quello che ho usato, ma non funziona per il dominio croce (praticamente rimuovere l'elemento IFRAME)

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

Potete aiutarmi? Grazie.

risposta

19

È necessario utilizzare una libreria che astrae questo (ad esempio http://easyxdm.net/wp/, non testato). La messaggistica con ID frammento potrebbe non funzionare in tutti i browser e ci sono approcci migliori, come ad esempio postMessage.

Tuttavia, il tuo esempio (Clipper) utilizza un hack chiamato fragment id messaging. Questo può essere cross-browser, a condizione che la pagina contenente l'iframe sia il livello più alto. In altre parole, ci sono due livelli in totale. Fondamentalmente, il bambino imposta il frammento del genitore, e il genitore guarda per questo.

Si tratta di un approccio simile a Clipper di:

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: tra domini e controllato in modo indipendente sono diversi. Ho scavato nel codice Polyvore (molto miniato/offuscato) per vedere come funziona (incidentalmente, non in Firefox). Per prima cosa ricorda che i bookmarklets, come il Clipper, si aprono nel contesto della pagina aperta all'avvio. In questo caso, i carichi bookmarklet a script, che a sua volta esegue una funzione di init che genera an iframe, ma anche corre:

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

Se digg in addListener, troverete (beautified):

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

annullare include:

removeNode(iframe); 

Ora, il pezzo unico rimasto è che il iframe page carichi another script con una funzione ClipperForm.init che comprende:

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

Così si vede chiaramente che stanno utilizzando la messaggistica frammento ID.

+0

questo è troppo complicato sopra quello che mi serve. Ho solo bisogno di chiudere gli iframe. Qualche modo semplice per farlo? In caso contrario, puoi mostrare un esempio di come questo lo fa?Grazie –

+0

Non ho il controllo sul documento principale però. Ecco perché ho dichiarato "cross domain". Proprio come l'esempio di Polyvore, non controllano anche il genitore, ma possono comunque chiudere l'iframe. Strano! –

+0

Come ho appena spiegato sopra, essi/fanno/controllano il genitore, e sono/stanno/utilizzando la messaggistica ID dei frammenti. –

1

Prova a nascondere il contenuto dell'iframe e non preoccuparti di eliminare effettivamente l'elemento iframe nel genitore.

+0

Come nascondere? Ho ricevuto questo errore Autorizzazione negata per per ottenere la proprietà Window.document da . Quindi in pratica non riesco a trovare un modo per fare qualcosa con l'iframe –

+0

Immagino che se imposti document.style.visibility = none (o comunque puoi nascondere tutti i contenuti iframe) sulle cose all'interno dell'iframe, ti ritroverai comunque con un grande quadrato bianco? In questo caso probabilmente hai bisogno di un meccanismo di comunicazione cross-frame come suggerisce Matthew Flaschen. Allo stesso tempo si inietta l'iframe stesso, si inietta anche lo script per gestire un lato della comunicazione; e la pagina caricata all'interno dell'iframe ha lo script per gestire l'altro lato. – Bruce

+0

Prova display: nessuno –

Problemi correlati