2010-08-11 23 views
11

Intento agregar dinámicamente un iframe a una página web usando JavaScript. Me gustaría saber si es posible establecer el atributo src de mi iframe sin usar otro archivo html a través de una URL. Quiero decir, ¿hay alguna manera de "falsificar" el html para el archivo de atributos src con una variable JS donde podemos establecer mi código (que es JS en sí)? Usaría DOM createElement para crear el iframe en jQuery.¿Es posible "falsificar" el atributo src de un iframe?

Gracias!

+0

¿Por qué quieres un marco? ¿Qué pasa con solo usar un div y 'overflow: scroll'? – Quentin

Respuesta

25

Puede consultar data:URIs.

<iframe src="data:text/html, .... URLencoded HTML data ...."> 

alternativamente

<iframe src="data:text/html;base64, .... base64 encoded HTML data ...."> 

El esquema está soportado por IE> = 8 (MSDN source), Firefox, Safari 3+ y Opera.

Tiene diferentes límites de longitud. Se dice que Opera corta a unos 4 kilobytes; Internet Explorer a 32 kilobytes. Firefox no tiene un límite de longitud explícito.

Más sobre los URI de datos y herramientas para convertir al Mozilla Developer Central

+0

Muchas gracias, estoy viendo todo esto ahora mismo =) – Lucas

+0

Parece ser lo que necesito. ¿Sabes si hay una manera de crear el código que entra en los datos HTML usando un Elemento o no sé cómo, y luego usarlo en el src? Porque mi código es JavaScript y, por el momento, no puedo hacerlo directamente. Pero lo intentará de nuevo. – Lucas

+0

@Lucas jQuery '.html()' debería darle los contenidos HTML de cualquier elemento. 'encodeURIComponent()' debería codificarlo correctamente para usarlo en el primer ejemplo. No existe una implementación nativa de 'base64()' en JS, pero mejor vaya con la forma URIencoded, ya que base64 aumenta el código en un 33%. –

1

Si está controlando el iframe completamente desde el lado del cliente, y nunca necesita realizar solicitudes del lado del servidor con ese iframe, es mucho más fácil diseñar un div para que parezca un iframe (consulte la propiedad overflow), donde Tendrás un control mucho más simple y directo sobre los contenidos DOM de ese div.

+0

Hago solicitudes en el servidor, por eso uso DOM – Lucas

-1

siguiente código debe hacer lo que quiera.

puede dejar el atributo src vacío.

var yourcontent="<div>your stuff</div>"; 
window.frames['frame_name'].document.write=yourcontent; 
+0

No puedo hacer eso después de cargar la página. – Lucas

Cuestiones relacionadas