C'è un modo per avere contenuto da un overflow IFRAME sul frame principale?

Question

Ho un widget UI che deve essere inserito in un IFRAME sia per motivi di prestazioni, sia per poterlo distribuire facilmente ai siti affiliati. L'interfaccia utente per il widget include suggerimenti che vengono visualizzati nella parte superiore di altri contenuti della pagina. Guarda lo screenshot qui sotto o vai al sito per vederlo in azione. Esiste un modo per far sì che il contenuto all'interno di IFRAME si sovrapponga al contenuto del frame principale?

Answer 1

No non è possibile. Ignorando qualsiasi motivo storico, oggigiorno sarebbe considerata una vulnerabilità di sicurezza - ad es. molti siti inseriscono contenuto non attendibile in iframe (la fonte iframe è di origine diversa, quindi non può modificare il frame principale, secondo la stessa politica di origine).

Se tale contenuto non attendibile avesse un meccanismo per posizionare il contenuto al di fuori dei limiti dell'iframe, potrebbe (ad esempio) inserire un " identico " login div (o qualunque altra cosa) sui campi di login reali di un frame genitore e potrebbe quindi rubare informazioni su username / password Che farebbe schifo.

Answer 2

Non sono riuscito a trovare un modo per far fluire il contenuto del frame fuori dal frame, ma ho trovato un modo per hackerarlo, spostando il tooltip nel documento principale e posizionandolo sopra (z-index ) l'iframe.

L'approccio era:
1) trova l'iframe nel documento principale
2) rimuovi l'elemento della descrizione comando da dove si trova nel DOM e aggiungilo al documento principale all'interno dell'elemento che contiene il tuo iframe.
3) probabilmente dovrai regolare z-index e posizionamento, a seconda di come lo stavi facendo in primo luogo.

Puoi accedere al documento principale di un iframe usando parent.document.

jQuery(tooltip).remove();
var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode;
iframeParent.appendChild(tooltip);
//adjust z-index, positioning

Answer 3

Questo potrebbe non essere corretto o perché non è adatto alla luce delle tue esigenze, oppure potrebbe non essere di aiuto (!), ma potrebbe valere la pena di dare un'occhiata a UFrame . È una specie di ibrido di iframe e div e probabilmente potrebbe essere impacchettato come un widget (la soluzione migliore sarebbe quella di dare ai clienti un tag <script> che risuccherebbe in UFrame e il markup pertinente). Ciò di cui non sono sicuro è se puoi ottenere l'overlay di cui hai bisogno, ma probabilmente vale la pena giocarci. Mi dispiace, non posso essere più specifico, ma non è qualcosa che ho usato da solo, l'ho appena aggiunto ai preferiti per riferimento futuro.

Answer 4

se conosci il massimo assoluto del valore che può avere la parte superiore dello strumento, puoi creare un div che è l'altezza del contenuto + la distanza più alta in cui verrà visualizzata la punta dello strumento. Allinea l'iframe alla fine del div. assicurati che iframe e div siano trasparenti. quindi dovrebbe essere visualizzato il contenuto iframe con la descrizione comandi. Anche se questo ti fa venire il mal di testa per assicurarti che cose come evidenziare funzionino allo stesso modo in tutti i browser.

Answer 5

Nidifica il tuo iframe corrente e il div suggerito, all'interno di un iframe principale, quindi rilascia l'iframe principale in terze parti, il migliore dei due mondi!

Answer 6

Per quanto ne so non può essere fatto. Perché non utilizzare una richiesta XHR e popolare un div invece?