Specificare il contenuto di un iframe invece dell'attributo src a una pagina

90

Attualmente sto lavorando a un modulo che include alcuni input di file per caricare le immagini. C'è un onchange()evento per quegli input che invia le immagini a un iframe, quindi carica dinamicamente le immagini caricate nel modulo, con i campi da modificare per loro (come nome e geolocalizzazione ).

Poiché non posso annidare i moduli, file_inputè contenuto anche in un file iframe. Alla fine uso l' iframeinterno di un altro iframe. Quindi ho qualcosa del genere:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

e il codice HTML caricato nel iframeè qualcosa di simile (escluso il html, heade bodytag)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

Funziona alla grande, tranne per il fatto che ci vogliono un paio di secondi per caricare il primo iframe, quindi l'input del file non viene caricato con il resto della pagina. Questo non è visivamente l'ideale. Potrei risolverlo se potessi specificare il iframecontenuto senza dover caricare un'altra pagina (specificata da file_input_urlnella prima iframe).

Esiste un modo per specificare il iframecontenuto nello stesso documento o può essere specificato solo con l' srcattributo, richiedendo il caricamento di un'altra pagina?

html iframe

— orlox
fonte

Non dovrebbero essere necessari "un paio di secondi" per caricare l'iframe. Mi aspetto che sia più simile a un decimo di millisecondo più il "tempo per mordere morso" (che dovrebbe essere anche millisecondi). Dovresti indagare su cosa sta causando tutto il ritardo, probabilmente qualcosa che non va nel tuo server.

— Abhi Beckert

96

Puoi inserire .write()il contenuto nel documento iframe. Esempio:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

— Guffa
fonte

1

Se avessi pensato a questa possibilità, però, l'html da caricare nell'iframe è complesso, e gestirlo interamente in javascript per scriverlo nell'iframe ne oscurerebbe troppo l'implementazione (fino al punto che preferisco lasciarlo così com'è).

— orlox

2

@orlox: ottieni il tuo contenuto dal server usando Ajax e inseriscilo. Se non vuoi andare in quel modo, crea un divelemento nascosto con il tuo contenuto e posiziona il suo contenuto iframetra <body>e </body>.

— impilabile

11

Più imparo sulle limitazioni degli iframe più li odio

— John Magnolia

1

Come faccio a sfuggire alle virgolette singole utilizzando questo metodo? Alcuni di essi sono importanti per l'HTML (ad esempio class = 'example'), alcuni sono importanti per i CSS (ad esempio font-family: 'Verdana';) e altri sono contenuti (ad esempio George O'Malley).

— Dan Bechard

2

@ Dan: per evitare qualsiasi valore da utilizzare in una stringa JavaScript delimitata da apostrofo, devi prima eseguire l'escape delle barre rovesciate, quindi degli apostrofi. Ad esempio, utilizzando C # per l'uscita di una stringa nel codice: doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');.

— Guffa

36

iframe ora supporta srcdoc che può essere utilizzato per specificare il contenuto HTML della pagina da mostrare nel frame inline.

— Ayush Gupta
fonte

2

IE non supporta questo diritto, ma potresti controllare caniuse per lo stato più recente.

— Ayush Gupta

Documentazione su MDN

— Benoit Blanchon

22

Puoi utilizzare l' data:URL in src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

<iframe></iframe>

Espandi lo snippet

Differenza tra srcdoc = "..." e src = "data: text / html, ..." in un iframe .

Converti HTML in dati: link di testo / html utilizzando JavaScript .

— utente
fonte

1

Non hai nemmeno bisogno di JavaScript: l' srcattributo può essere specificato in linea se con escape, ad esempio usando rawurlencodein PHP:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— Jake

Microsoft ha aggiunto il supporto per questo più o meno nello stesso momento in cui ha aggiunto il supporto per srcdoc, ed srcdocè il modo migliore per farlo. Gli URL di dati sono ampiamente supportati solo per immagini e CSS, per quanto ne so nessuna versione di Internet Explorer li supporta in un iframe.

— Abhi Beckert

6

In combinazione con quanto descritto da Guffa, potresti usare la tecnica descritta in Spiegazione di <script type = "text / template"> ... </script> per memorizzare il documento HTML in un scriptelemento speciale (vedi il link per una spiegazione su come funziona). È molto più semplice che memorizzare il documento HTML in una stringa.

— ximo
fonte

A pensarci bene, non funzionerebbe molto bene per un documento HTML completo. Tag come <html>, <body>, <script>avrebbero solo confondere il browser, rompendo il rendering del documento.

— ximo

Questo non sembra essere un problema, i tag HTML all'interno degli script vengono ignorati.

— HBP

Hai ragione :) Non avevo ancora provato la tecnica quando l'ho scritta, e devo aver raccolto quell'ipotesi da qualche parte. In seguito ho scoperto che qualsiasi cosa all'interno di un <script>tag sarebbe stato ignorato dal browser .. Grazie per avermi corretto!

— ximo