Cómo hacer que iFrame cambie las páginas con un botón

Escrito por kevin lee | Traducido por walter f. stocco
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer que iFrame cambie las páginas con un botón
Los iFrames responden a clics de botón al igual que a otros controles HTML. (Jupiterimages/Photos.com/Getty Images)

Microsoft llama iFrame a "un documento dentro de un documento". Si alguna vez has visto una página web que se encuentra dentro de otra página, el desarrollador del sitio puede haber creado ese efecto utilizando iFrame. iFrame tiene muchos usos. Por ejemplo, puede mostrar las condiciones meteorológicas en tu página web mediante la incorporación de un iFrame que contenga un sitio con el clima. Si vinculas un botón interactivo a tu iFrame, los usuarios pueden cambiar la página del mismo haciendo clic en el botón.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Inicia el Bloc de notas o tu programa de edición HTML.

  2. 2

    Abre una de las páginas web y agrega el siguiente código HTML:

    <iframe id="IFrame1" src="http://www.google.com" width="400px" height="300px"> <p>Your browser cannot view iFrames</p> </iframe>

    <input type="button" value="Change Page" onclick="return ChangePage()" />

    Esto crea un iFrame. El "src" apunta apropiadamente a la página principal de Google. El botón denominado "ChangePage" llama a una función de JavaScript al hacer clic. Ese cambio de función es la página de iFrame. El texto "Su navegador no puede ver iFrames" aparece en un navegador si la configuración del mismo le impide ver cuadros. Nota el "ID" del iFrame apropiadamente. Ese valor es "IFrame1". Este valor de id permite que una función JavaScript localice al iFrame y funcione con éste.

  3. 3

    Agrega este código a la sección "head" del documento:

    <script language="javascript" type="text/javascript"> var iFrameID = "IFrame1" var newPage = "http://www.bing.com";

    function ChangePage() { var iFrameObject = document.getElementById(iFrameID); iFrameObject.src = newPage; } </script>

    La variable "iFrameID" tiene el ID de iFrame creado en el paso anterior. La variable "newPage" contiene la dirección URL de la nueva página que deseas que muestre iFrame. Esa URL es la página de inicio de Bing en este ejemplo. La función JavaScript "ChangePage" obtiene una referencia de iFrame y cambia su valor "src" al valor almacenado en la variable "newPage".

  4. 4

    Guarda el documento y ábrelo en tu navegador. Verás la página principal de Google dentro del iFrame de la página.

  5. 5

    Haz clic en el botón "Cambiar página". La función de JavaScript se ejecuta y cambia la página de iFrame a Bing.

Consejos y advertencias

  • Coloca el nombre que desees al "ID" del iFrame. En este ejemplo, el nombre es "iFrameID". Si cambias el nombre, cambia el valor de "iFrameID" en el código JavaScript para que coincida con ese nombre. En producción, puede que no desees que el botón cambie la página de iFrame a Bing. Establece el valor de "newPage" a la nueva URL que desees mostrar cuando el usuario haga clic en el botón "Cambiar página".

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles