Especificar el contenido de un iframe en lugar del src en una página

Actualmente estoy trabajando en un formulario que además de todos los campos normales de un formulario, también tiene entradas de archivo para cargar imágenes, que onchange envía la imagen a un iframe , luego carga dinamicamente la imagen cargada en el formulario con los campos que se modificarán para ellos (como el nombre y la geolocalización). Como no puedo anidar formularios, file_input también está contenido en un iframe, así que al final utilizo un iframe dentro de un iframe. Así esquemáticamente, tengo algo como esto:Especificar el contenido de un iframe en lugar del src en una página

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

y el HTML cargada en el iframe es algo así como (etiquetas html ignorando, de cabeza y cuerpo)

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

Esto funciona muy bien, excepto que toma un par de segundos para cargar el primer iframe, por lo que la entrada del archivo no se carga con el resto de la página y visualmente no es ideal. Podría resolver esto si fuera posible especificar el contenido del iframe sin necesidad de cargar otra página (especificado por 'file_input_url' en el primer iframe).

Entonces, mi pregunta es, ¿hay alguna forma de especificar el contenido del iframe en el mismo documento, o solo se puede especificar con el atributo src, por lo que es necesario cargar otra página?

Fuente

2010-11-16 orlox

Puede escribir el contenido en el documento de iframe. Ejemplo:

<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>

Fuente

2010-11-16 22:08:48 Guffa

Si bien se pensó en esta posibilidad, el html que debe cargarse en el iframe es complejo, y manejarlo completamente en javascript para escribirlo en el iframe oscurecería demasiado la implementación (hasta el punto de que Prefiero dejarlo como está). – orlox

@orlox: Obtenga su contenido del servidor utilizando Ajax e inyéctelo. Si no quieres ir de esa forma, crea un elemento oculto 'div' con tu contenido y coloca su contenido en' iframe' entre '' y ''. – stackular

Cuanto más aprendo acerca de las restricciones de los iframes, más los odio –

En combinación con lo Guffa descrito, se podría utilizar la técnica descrita en Explanation of <script type = "text/template"> ... </script> para almacenar el documento HTML en un elemento especial script (ver el enlace para obtener una explicación sobre cómo funciona esto). Eso es mucho más fácil que almacenar el documento HTML en una cadena.

Fuente

2011-09-16 15:16:54 ximo

Pensándolo bien, eso no funcionaría muy bien para un documento HTML completo. Las etiquetas como '', '', '

Cuestiones relacionadas

Especificar el contenido de un iframe en lugar del src en una página

Respuesta

Cuestiones relacionadas