Cómo usar iFrame para cargar contenido en un DIV

Escrito por chris hoke | Traducido por jesica denisse tschiffely
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo usar iFrame para cargar contenido en un DIV
Usa un iframe para cargar contenido en un DIV. (Comstock/Comstock/Getty Images)

Los contenedores DIV son elementos de una página Web que se utilizan para ubicar y diseñar contenido. Por lo general se usan para crear el diseño de una página Web, pero también puedes cargar contenido en un contenedor DIV usando un iframe y la propiedad "innerhtml" de JavaScript. Cada elemento HTML, incluyendo los contenedores DIV, tienen una propiedad "innerhtml" que puedes manipular para cambiar el contenido del elemento. Si quieres cargar contenido remoto en tu contenedor DIV puedes cambiar la propiedad "innerhtml" del DIV con los contenidos de un iframe.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu documento de la página Web en un editor de HTML o texto. Para abrirlo en un editor de texto de Windows, haz clic derecho en el ícono del documento, luego en "Abrir con", selecciona "Notepad" o "WordPad" en la lista de aplicaciones y luego haz clic en "Aceptar".

  2. 2

    Haz clic para colocar el cursor entre los rótulos "<BODY>" y "</BODY>".

  3. 3

    Escribe "<div id='frameContainer'></div>" y presiona "Enter" (o Intro) para crear el DIV que deseas usar para mostrar el contenido.

  4. 4

    Escribe "<script type='text/javascript'>" para abrir un rótulo de script JavaScript, luego presiona "Enter".

  5. 5

    Escribe "onload=function(){" y presiona "Enter". Esta línea de código activa el script cuando se carga la página Web.

  6. 6

    Escribe "var el=document.getElementById('frameContainer')" y presiona "Enter" para obtener la propiedad ID del contenedor DIV.

  7. 7

    Escribe la siguiente línea de código y presiona "Enter" para cambiar la propiedad "innerhtml" del contenedor DIV por un iframe: el.innerHTML="<iframe src=\"http://www.example.com\"></iframe>"

  8. 8

    Cambia el texto "www.example.com" del paso anterior por la URL de la página Web que quieres cargar en el contenedor DIV.

  9. 9

    Escribe "}" y presiona "Enter" para cerrar las funciones de JavaScript.

  10. 10

    Escribe "</script>" para cerrar el rótulo de script de JavaScript.

  11. 11

    Haz clic en el menú "Archivo" y luego en "Guardar".

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