Cómo acceder a los objetos que están fuera de un iframe

Escrito por kevin lee | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo acceder a los objetos que están fuera de un iframe
Tu iframe no puede acceder a los contenidos del documento HTML padre si éste esta en un dominio diferente. (Hemera Technologies/AbleStock.com/Getty Images)

Si quieres que tu página web muestre una ventana con otra de tus páginas web, puedes hacerlo colocando un iframe en tu página principal. Los iframes no son tan habituales como lo eran en los 90, pero en el momento de esta publicación, todos los navegadores modernos los soportan. Entender cómo se comunica un iframe con la página que lo tiene es esencial si tu iframe necesita acceder a un objeto que no existe en su código HTML.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Añade el código siguiente a la sección del cuerpo de uno de los documentos HTML:

    <iframe id="iframe1" name="iframe1" src="iframe1.htm"></iframe> <input id="parentTextbox" type="text" value="red" />

    La primera sentencia crea un iframe que hace referencia a un documento HTML llamado "iframe.html". La etiqueta de entrada crea una caja de texto cuyo valor es "red". Guarda el documento, ciérralo y abre otro documento HTML. El documento que abras será la página que aparecerá dentro del iframe.

  2. 2

    Pega el código siguiente en la sección del cuerpo del documento:

    <input type="button" value="Access Parent" onclick="return accessParent()" />

    Este código crea un botón que llama a una función llamada accessParent al hacer clic.

  3. 3

    Pega el siguiente código JavaScript en la sección de script del documento:

    function accessParent() { var objectToGet = "parentTextbox"; var parentObject = parent.document.getElementById(objectToGet); var objectValue = parentObject.value; parentObject.value = "green"; alert("Parent object value = " + objectValue); }

    La primera sentencia crea una variable llamada objectToGet. Su valor, "ParentTextbox", es el ID de la caja de texto que estará en el documento padre. La siguiente sentencia usa el método getElementById para recuperar el objeto, y la sentencia final almacena el valor del objeto en la variable objectValue. El método de alerta muestra ese valor.

  4. 4

    Guarda el documento y ponle de nombre "iframe1.html". Debes darle este nombre porque es el que tiene el iframe en la referencia del documento padre. En este momento, el primer documento que editaste, el padre, tendrá la etiqueta del iframe. El segundo documento, el hijo, aparecerá dentro del iframe del padre.

  5. 5

    Ejecuta tu navegador web y abre el documento padre. Verás el segundo documento HTML dentro del contenedor de iframe. Haz clic en "Acceder al padre" para volver al código. La función JavaScript se ejecutará dentro del iframe, recuperará el valor almacenado en la caja de texto del padre y mostrará la palabra "red" en la ventana emergente.

Consejos y advertencias

  • Puesto que puedes acceder al objeto del padre y hacerlo visible en el iframe, puedes examinar las otras propiedades el objeto y cambiarlas. Si pegas parentObject.value = "green" al final de la función JavaScript, por ejemplo, el valor de la caja de texto cambiará por "verde".
  • Tu iframe no puede acceder a los contenidos del documento HTML padre si éste esta en un dominio diferente. Por ejemplo, si el padre está en "http://www.domain1.com", tu documento de iframe debe estar también ahí.

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