Referencias entre marcos
Todos los marcos de una página se proporcionan como atributos del objeto de ventana en forma de colección. Por ejemplo: window.frames representa la colección de todos los marcos de la página. Esto es similar a los objetos de formulario, objetos de enlace, objetos de imagen, etc. ., pero la diferencia es que estas colecciones son propiedades del documento. Por lo tanto, para hacer referencia a una subtrama, puede utilizar la siguiente sintaxis:
Copie el código de código de la siguiente manera:
ventana.frames["nombredelmarco"];
ventana.frames.frameName
ventana.marcos[índice]
Entre ellos, la palabra ventana también se puede reemplazar u omitir por self. Suponiendo que frameName es el primer cuadro de la página, los siguientes métodos de escritura son equivalentes:
Copie el código de código de la siguiente manera:
self.frames["nombredelmarco"]
self.frames[0]
marcos[0]
nombre del marco
Cada marco corresponde a una página HTML, por lo que este marco también es una ventana del navegador independiente. Tiene todas las propiedades de una ventana. La llamada referencia al marco es una referencia al objeto de ventana. Con este objeto de ventana, puede operar fácilmente las páginas que contiene, como usar el objeto window.document para escribir datos en la página, usar la propiedad window.location para cambiar la página en el marco, etc.
A continuación se presentan las referencias mutuas entre diferentes niveles de marcos:
1. Referencia del marco principal al marco secundario
Conociendo los principios anteriores, es muy fácil hacer referencia al marco secundario desde el marco principal, es decir:
Copie el código de código de la siguiente manera:
ventana.frames["nombredelmarco"];
Esto hace referencia al subtrama denominado frameName dentro de la página. Si desea hacer referencia a un subtrama dentro de una subtrama, de acuerdo con la naturaleza del marco referenciado, que en realidad es el objeto de la ventana, puede implementarlo de esta manera:
Copie el código de código de la siguiente manera:
ventana.frames["frameName"].frames["frameName2"];
De esta manera, se hace referencia al subtrama de segundo nivel y, por analogía, se puede lograr la referencia de marcos multicapa.
2. Referencia del marco hijo al marco padre
Cada objeto de ventana tiene una propiedad principal que representa su marco principal. Si el marco ya es un marco de nivel superior, window.parent también representa el marco en sí.
3． Referencias entre marcos hermanos
Si dos marcos son submarcos del mismo marco, se denominan marcos hermanos y pueden hacer referencia entre sí a través del marco principal. Por ejemplo, una página incluye dos submarcos:
Copie el código de código de la siguiente manera:
<conjunto de marcos filas="50%,50%">
<marco src="1.html" nombre="marco1" />
<marco src="2.html" nombre="marco2" />
</conjunto de marcos>
En el cuadro1, puede utilizar la siguiente declaración para hacer referencia al cuadro2:
Copie el código de código de la siguiente manera:
self.parent.frames["marco2"];
4. Referencias mutuas entre diferentes niveles de marcos.
El nivel del marco es para el marco de nivel superior. Cuando los niveles son diferentes, siempre que sepa el nivel en el que se encuentra y el nivel y el nombre del otro marco, pueden acceder fácilmente entre sí utilizando las propiedades del objeto de ventana al que hace referencia el marco, por ejemplo:
Copie el código de código de la siguiente manera:
self.parent.frames["childName"].frames["targetFrameName"];
5. Referencia al marco de nivel superior
De manera similar a la propiedad principal, el objeto de ventana también tiene una propiedad superior. Representa una referencia al marco de nivel superior, que se puede utilizar para determinar si un marco en sí es un marco de nivel superior, por ejemplo:
Copie el código de código de la siguiente manera:
//Determinar si este marco es un marco de nivel superior
si(self==arriba){
//hacer algo
}
Cambiar la página de carga del marco.
La referencia al marco es una referencia al objeto de ventana. Usando el atributo de ubicación del objeto de ventana, puede cambiar la navegación del marco, por ejemplo:
ventana.frames[0].ubicación="1.html";
Esto redirige la página del primer marco de la página a 1.html. Aprovechando esta propiedad, incluso puedes usar un enlace para actualizar varios marcos.
Copie el código de código de la siguiente manera:
<conjunto de marcos filas="50%,50%">
<marco src="1.html" nombre="marco1" />
<marco src="2.html" nombre="marco2" />
</conjunto de marcos>
<!--algún código-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">enlace</a>
<!--algún código-->
Hacer referencia a variables y funciones de JavaScript dentro de otros marcos.
Antes de presentar técnicas para hacer referencia a variables y funciones de JavaScript en otros marcos, veamos el siguiente código:
Copie el código de código de la siguiente manera:
<script idioma="JavaScript" tipo="texto/javascript">
<!--
función hola(){
alerta("hola,ajax!");
}
ventana.hola();
//-->
</script>
Si ejecuta este código, aparecerá una ventana "¡Hola, ajax!", que es el resultado de ejecutar la función hola(). Entonces, ¿por qué hello() se convirtió en un método del objeto ventana? Porque todas las variables globales y funciones globales definidas dentro de una página son miembros del objeto de ventana. Por ejemplo:
Copie el código de código de la siguiente manera:
var a = 1;
alerta (ventana.a);
Aparecerá un cuadro de diálogo que muestra 1. El mismo principio se aplica al compartir variables y funciones entre diferentes marcos llamándolas a través del objeto de ventana.
Por ejemplo: una página de exploración de productos consta de dos submarcos. El lado izquierdo representa el enlace a la categoría del producto; cuando el usuario hace clic en el enlace de la categoría, la lista de productos correspondiente se muestra en el lado derecho; Compra] enlace al lado del producto para agregar el carrito de compras del producto.
En este ejemplo, la página de navegación izquierda se puede utilizar para almacenar los productos que el usuario desea comprar, porque cuando el usuario hace clic en el enlace de navegación, lo que cambia es otra página, es decir, la página de visualización del producto y la página de navegación misma. permanece sin cambios, por lo que las variables de JavaScript no se perderán y podrán usarse para almacenar datos globales. Su principio de implementación es el siguiente:
Supongamos que la página de la izquierda es link.html y la página de la derecha es show.html. La estructura de la página es la siguiente:
Copie el código de código de la siguiente manera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transicional//ES">
<html>
<cabeza>
<título> Nuevo documento </título>
</cabeza>
<conjunto de marcos cols="20%,80%">
<frame src="enlace.html" nombre="enlace" />
<frame src="mostrar.html" nombre="mostrar" />
</conjunto de marcos>
</html>
Puede agregar una declaración como esta junto a los productos que se muestran en show.html:
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">Añadir al carrito</a>
Entre ellos, el enlace representa el marco de navegación. La matriz arrOrders se define en la página link.html para almacenar la identificación del producto. La función addToOrders() se utiliza para responder al evento de clic del enlace [Comprar] al lado del. producto La identificación del parámetro que recibe representa la identificación del producto. El ejemplo es un producto con ID 32068.
Copie el código de código de la siguiente manera:
<script idioma="JavaScript" tipo="texto/javascript">
<!--
var arrOrders=nueva matriz();
función agregarToOrders(id){
arrOrders.push(id);
}
//-->
</script>
De esta manera, puede utilizar arrOrders en la página de pago o en la página de navegación del carrito de compras para tener todos los productos listos para comprar.
El marco puede dividir una página en múltiples módulos con funciones independientes. Cada módulo es independiente entre sí, pero se puede conectar a través de la referencia del objeto de ventana. Es un mecanismo importante en el desarrollo web.