Crear iframes dinámicamente mediante Javascript

Clasificado en... Javascript - iframes - Publicado el... 15/01/2007

En ocasiones y por diversas razones, se nos puede plantear la necesidad de cargar contenido sin necesidad de recargar la página. En este caso AJAX es una solución que nos permite cargar el contenido dentro de un contenedor tipo <div>, por ejemplo. Pero también podemos cargar el contenido dentro de un iframe, que es especialmente útil a la hora de invocar contenidos de otro dominio sin necesidad de complicarnos con hacks cross-domain.Un ejemplo:

<html>
<head>
<script language="JavaScript">
function crearFrame( ) {
var testFrame = document.createElement("IFRAME");
testFrame.id = "testFrame";
testFrame.src = "http://www.google.es";
document.body.appendChild(testFrame);
}
</script>
</head>
<body>
<p><input type="button" name="Submit" value="cargar" onclick="crearFrame()"/></p>
</body>
</html>

Podemos añadirle propiedades de ancho, alto, etc al iframe para controlar mejor su apariencia. Si deseamos controlar que solo se cree el iframe una sola vez deberemos controlar que éste no exista previamente:

function crearFrame(  ) {
var testFrame = document.createElement("IFRAME");
testFrame.id = "testFrame";
testFrame.src = "http://www.google.es";
var control = document.getElementById("testFrame")
if (control==null) {
document.body.appendChild(testFrame);
}
}

Ver ejemplo en funcionamiento » »

 

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados.

Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web o deseas contactar conmigo lo puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com

CAPTCHA para los comentarios

El hombre nunca sabe de lo que es capaz hasta que lo intenta.Dickens, Charles
30 hojas de referencia rápida o cheat sheets sobre CSS

Este tipo de ayudas o chuletas pueden sernos de gran utilidad puesto que de una manera rápida podemos obtener información sobre sintaxis, métodos o propiedades CSS.

Plugin jQuery para obtener columnas de igual tamaño

Plugin muy útil para conseguir que los bloques de nuestro layout tengan la misma altura, independientemente de su contenido.

45 diseños tipográficos en 3D

La tipografía en 3D se ha convertido en un recurso bastante popular en el diseño. En esta recopilación se recogen 45 muestras de su uso; que nos pueden servir de inspiración.

MySQL Sidu, cliente web de MySQL

MySQL Sidu es un cliente gratuito para MySQL que trabaja mediante nuestro navegador de internet. Es sencillo e intuitivo y posee características similares a las que podemos encontrar en otros programas similares y más conocidos como phpMyAdmin.

Face Your Manga: Crea tu avatar manga

FaceYourManga es una web que permite crear un avatar con aires manga. La creación del avatar es muy completa e intuitiva, pudiéndose personalizar todos los elementos de la cara -ojos, nariz, boca, pelo, color de piel…-. Tantos detalles como consideremos necesarios necesarios para crear el personaje.

PhotoFunia

PhotoFunia, una herramienta web con la que podemos aplicarle muchos y diferentes efectos a nuestras imágenes. Tenemos multitud de efectos, desde poner nuestra foto en un marco antiguo, en la camiseta de una chica, enla camiseta de Angelina Jolie, en un billete de dolar, en carteles publicitarios, revistas, etc. Al entrar al sitio verán una galería con los ejemplos de los efectos que podemos agregar, y al pinchar en cualquiera de ellos vamos a la sección donde tenemos que subir nuestra imagen, que luego se estampará automáticamente con el efecto adecuado. Diferente y curioso.

MemProxy: una aplicación proxy con PHP

MemProxy es un script PHP, que nos permite tener un servidor proxy de peticiones web y cachea los contenidos en memcached. Es necesario PHP5.2, la extensión PECL para memcache, servidor web con capacidad de re-escritura y memcached.

Usable y accesible: Argumentos para vender accesibilidad web

«A veces hace falta mucho poder de convicción para hacer ver a un cliente que un desarrollo accesible sólo aporta beneficios para su empresa, pero todo resulta más fácil si se tienen interiorizados una serie de argumentos. Estos argumentos serán mucho más efectivos si se muestra convicción en su exposición, si se defienden con un lenguaje claro y si resaltan los beneficios económicos y prácticos de la accesibilidad web, que es lo que realmente interesa a nuestros clientes: la rentabilidad, los beneficios y los costes.» Muy interesante lectura.

14 maneras de aprender de los programadores creativos

Estas son algunas de las maneras en que podemos aprender de los programadores sobre la forma de reforzar nuestra creatividad: Aprender un nuevo lenguaje; Empezar de abajo hacia arriba; Cuestionarse todo; Hacerlo por diversión; Nunca dejar de probar nuevas ideas; Encontrar una pasión; etc.