clipped from: www.webintenta.com   

Crear iframes dinámicamente mediante Javascript

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:

  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. function crearFrame(  ) {
  5.     var testFrame = document.createElement("IFRAME");
  6.     testFrame.id = "testFrame";
  7.     testFrame.src = "http://www.google.es";
  8.     document.body.appendChild(testFrame);
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <p><input type="button" name="Submit" value="cargar"  onclick="crearFrame()"/></p>
  14. </body>
  15. </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:

  1. function crearFrame(  ) {
  2.     var testFrame = document.createElement("IFRAME");
  3.     testFrame.id = "testFrame";
  4.     testFrame.src = "http://www.google.es";
  5.     var control = document.getElementById("testFrame")
  6.     if (control==null) {
  7.     document.body.appendChild(testFrame);
  8.     }
  9. }

Ver ejemplo en funcionamiento » »