Come faccio a generare un iframe con lo stesso dominio della pagina in Safari / WebKit
-
21-08-2019 - |
Domanda
La scena : Sto scrivendo un widget embeddable. Prende la forma di un tag <script>
, che costruisce un iframe che contiene tutto ciò di cui ha bisogno per visualizzare. L'iframe non ha src
, e lo script scrive ad essa con theIframe.contentWindow.document.write()
. Ciò mantiene il widget di contenuto, e mantiene gli ID degli elementi e script dal conflitto con la pagina in cui è inserito il widget.
Il trucco : Il widget deve essere in grado di modificarne le dimensioni. Per fare questo, esso imposta style.height
sua contenente del iframe. Ciò richiede l'accesso al DOM della pagina esterna. In Firefox e IE , questo è permesso, perché il documento del iframe e il documento esterno sono considerati a condividere un'origine.
La torsione : in Safari , tuttavia, i due documenti sono considerati non per condividere un'origine. Il documento interno è considerato a about:blank
, mentre il documento esterno è chiaramente usando un protocollo diverso e "dominio" (se blank
può essere considerato il dominio).
La domanda :? Come faccio a costruire un iframe a livello di codice il cui documento Safari / WebKit prenderà in considerazione di avere la stessa origine del documento della finestra di creazione di esso
Modifica :. Dopo ulteriori sperimentazioni, non riesco a trovare un modo per creare a livello di codice un iframe la cui posizione non è document.createElement()
indipendentemente dal fatto che a cambiare il suo contenuto
Se creo il telaio con document.body.appendChild()
, dargli un foo.html
che punta a una vera e propria risorsa HTML sulla stessa origine chiamata "foo.html", e document.write()
esso, console di Safari mostra l'elemento come previsto nel DOM, ma il contenuto della pagina non appaiono, e il documento è elencato nella barra laterale come "about: blank".
Se includo il codice HTML per l'iframe direttamente nella pagina, viene visualizzato il contenuto di <=>, e "foo.html" appare nella barra laterale.
Se inserisco il codice HTML usando <=>, ottengo lo stesso risultato con <=>.
Entrambe le versioni programmatici lavorano in Firefox.
Soluzione 2
Aha. Questo sembra essere un bug in WebKit. Quando un iframe si crea a livello di codice, il suo attributo src
viene ignorato. Invece, le impostazioni predefinite del telaio per about:blank
e devono essere indirizzate a un URL per puntare altrove. Ad esempio:
theIframe.contentWindow.location = theIframe.src
Altri suggerimenti
Il suggerimento migliore che potrei dare è quello di avere il set iframe a una pagina vuota sullo stesso server (cioè blank.html) e quindi modificare il contenuto. Un dolore nella parte posteriore, lo so ma è una soluzione.
Si potrebbe anche provare
iframe.contentDocument.open("replace");
iframe.contentDocument.write("<b>This is some content</b>");
iframe.contentDocument.close();
Tuttavia, non sono sicuro se questo funziona solo in IE. Mi dispiace di non poter essere più utile di quello.