Tecnología

Inicio

Cómo acceder a los objetos fuera de un iframe

Si desea que su página web para mostrar una ventana que contiene otra de sus páginas web, puede hacerlo mediante la colocación de un iframe en su página principal. Iframes no son tan comunes como lo fueron en los años 90, pero a partir de la fecha de publicación, todos los navegadores modernos los apoyan. La comprensión de cómo un iframe se comunica con la página que lo sostiene es esencial si su iframe necesita tener acceso a un objeto que no existe en su código HTML.

Instrucciones

1 Agregue el código siguiente a la sección de cuerpo de uno de los documentos HTML:

<Iframe id = "iframe1" name = "iframe1" src = "iframe1.htm"> </ iframe>
<Input id = tipo "parentTextbox" = "text" value = "red" />

La primera instrucción crea un iframe que hace referencia a un documento HTML llamado "iframe1.html." La etiqueta de entrada crea un cuadro de texto cuyo valor es "rojo". Guarde este documento, cerrarla y abrir otro documento HTML. El documento se abre se convertirá en la página que aparece dentro del marco flotante.

2 Pegar el código se muestra a continuación en la sección del cuerpo del documento:

<Input type = valor "botón" = "Padre de acceso" onclick = "return accessParent ()" />

Este código crea un botón que llama a una función llamada accessParent cuando se hace clic.

3 Pegue el siguiente código JavaScript en la sección de escritura del documento:

accessParent función () {
var objectToGet = "parentTextbox";
var = ParentObject parent.document.getElementById (objectToGet);
var = objectValue parentObject.value;
parentObject.value = "verde";
alert ( "valor del objeto de Padres =" + objectValue);
}

La primera declaración crea una variable llamada objectToGet. Su valor, "ParentTextbox," es el ID del cuadro de texto que residen en el documento principal. La siguiente instrucción utiliza el método getElemenById para recuperar ese objeto, y la declaración final almacena el valor del objeto en la variable objectValue. El método de alerta muestra ese valor.

4 Guarde este documento y el nombre de "iframe1.html." Debe darle este nombre debido a que es el nombre del iframe tiene en las referencias de los documentos de los padres. En este punto el primer documento que ha editado, el padre, contiene la etiqueta iframe. El segundo documento, el niño, aparece dentro de iframe de los padres.

5 Inicie el navegador web y abrir el documento principal. Verá el segundo documento HTML dentro del contenedor iframe. Haga clic en el botón de "Padre de acceso" para ejecutar el código. La función de JavaScript se ejecuta dentro del marco flotante, recupera el valor almacenado en el cuadro de texto de la matriz y muestra la palabra "rojo" en una ventana de mensaje.

Consejos y advertencias

  • Debido a que tiene la capacidad de acceder objeto de un padre y hacerla visible en un iframe, puede examinar otras propiedades del objeto, así y cambiarlos. Si pega parentObject.value = "verde" al final de la función de JavaScript, por ejemplo, los cambios de valor del cuadro de texto a "verdes".
  • Su marco flotante no puede acceder al contenido de un documento HTML padre si el documento de la matriz se encuentra en un dominio diferente. Por ejemplo, si el documento principal reside en "http://www.domain1.com", documento de su iframe también debe residir en ese lugar.