Explication détaillée des appels mutuels des fonctions js dans frame_Basic Knowledge

Références mutuelles entre les frames

Tous les frames d'une page sont fournis sous la forme d'une collection en tant qu'attributs de l'objet window Par exemple : window.frames représente la collection de tous les frames de la page, qui. est identique à l'objet formulaire, les objets lien, les objets image, etc. sont similaires, mais la différence est que ces collections sont des attributs du document. Ainsi, pour référencer un sous-frame, vous pouvez utiliser la syntaxe suivante :

Copier le code Le code est le suivant :

window.frames["frameName"];
window.frames.frameName
window.frames[index]

Parmi eux, le mot window peut également être remplacé ou omis par self. En supposant que frameName soit le premier cadre de la page, les méthodes d'écriture suivantes sont équivalentes :

Copier le code Le code est le suivant :

self.frames["frameName"]
self .frames[0]
frames[0]
frameName

Chaque cadre correspond à une page HTML, ce cadre est donc également une fenêtre de navigateur indépendante. Il possède toutes les propriétés d'une fenêtre. La soi-disant référence au cadre est également une référence à l'objet fenêtre. Avec cet objet window, vous pouvez facilement opérer sur les pages qu'il contient, par exemple en utilisant l'objet window.document pour écrire des données sur la page, en utilisant la propriété window.location pour changer la page dans le cadre, etc.
Ce qui suit présente les références mutuelles entre les différents niveaux de frameworks :

1． Référence du frame parent au frame enfant
Connaissant les principes ci-dessus, il est très simple de référencer le frame enfant à partir du frame parent, c'est-à-dire :

Copier le code Le code est le suivant :

window.frames["frameName"];

Ceci fait référence au sous-cadre nommé frameName dans la page. Si vous souhaitez référencer un sous-cadre au sein d'un sous-cadre, selon la nature du cadre référencé, qui est en fait l'objet fenêtre, vous pouvez l'implémenter comme ceci :

Copier code Le code est le suivant :

window.frames["frameName"].frames["frameName2"];

De cette façon, le sous-trame de deuxième niveau est référencé, et ainsi de suite, peut réaliser la référence du cadre multicouche.

2． Référence du cadre enfant au cadre parent
Chaque objet fenêtre possède un attribut parent qui représente son cadre parent. Si le cadre est déjà un cadre de niveau supérieur, window.parent représente également le cadre lui-même.

3. Références entre cadres frères
Si deux cadres sont des sous-cadres d'un même cadre, ils sont appelés cadres frères et peuvent se référencer via le cadre parent. Par exemple, une page comprend 2 sous-cadres :

Copier le code Le code est le suivant :

 

Vous pouvez utiliser l'instruction suivante dans l'image1 pour référencer l'image2 :

Copiez le code Le code est le suivant :

self.parent.frames["frame2"];

4． Références mutuelles entre différents niveaux de frameworks

Le niveau du framework est pour le framework de niveau supérieur. Lorsque les niveaux sont différents, tant que vous connaissez le niveau auquel vous vous trouvez ainsi que le niveau et le nom de l'autre frame, vous pouvez facilement accéder les uns aux autres en utilisant les propriétés de l'objet window référencé par le frame, par exemple :

Copier le code Le code est le suivant :

self.parent.frames["childName"]. cadres["targetFrameName"];

5． La référence au cadre supérieur

est similaire à l'attribut parent. L'objet window a également un attribut top. Il représente une référence au cadre de niveau supérieur, qui peut être utilisée pour déterminer si un cadre lui-même est un cadre de niveau supérieur, par exemple :

Copier le code Le code est le suivant :

//Déterminer si ce cadre est un top -level frame
if(self==top){
//dosomething
}

Modifier la page de chargement du frame
La référence au frame est la référence à l'objet window A l'aide de l'attribut location de l'objet window, vous pouvez modifier la navigation du frame, par exemple :
window.frames[0].location= "1.html";
Cela redirigera la page du premier cadre de la page vers 1.html En utilisant cette propriété, vous pouvez même utiliser un lien pour mettre à jour plusieurs cadres.

Copier le code Le code est le suivant :

 
 


lien< ;/a>

Référencement de variables et de fonctions JavaScript dans d'autres frameworks
Avant d'introduire les techniques de référencement de variables et de fonctions JavaScript dans d'autres frameworks, examinons le code suivant :

Copier le code Le code est le suivant :

Si vous exécutez ce code, une fenêtre "hello, ajax!" apparaîtra, résultat de l'exécution de la fonction hello(). Alors pourquoi hello() est-il devenu une méthode de l'objet window ? Parce que toutes les variables globales et fonctions globales définies dans une page sont membres de l'objet window. Par exemple :

Copier le code Le code est le suivant :

var a=1;
alert( window.a);

fera apparaître une boîte de dialogue affichant 1. Le même principe s'applique au partage de variables et de fonctions entre différents frameworks en les appelant via l'objet window.
Par exemple : une page de navigation de produits se compose de deux sous-cadres. Le côté gauche représente le lien de la catégorie de produit ; lorsque l'utilisateur clique sur le lien de la catégorie, la liste des produits correspondante s'affiche sur le côté droit ; cliquez sur le lien [Acheter] à côté du produit Ajouter des articles au panier.
Dans cet exemple, vous pouvez utiliser la page de navigation de gauche pour stocker les produits que l'utilisateur souhaite acheter, car lorsque l'utilisateur clique sur le lien de navigation, ce qui change est une autre page, la page d'affichage du produit, tandis que la page de navigation elle-même reste inchangé. Ainsi, les variables JavaScript qu'il contient ne seront pas perdues et pourront être utilisées pour stocker des données globales. Le principe de mise en œuvre est le suivant :
Supposons que la page de gauche soit link.html et la page de droite soit show.html La structure de la page est la suivante : .

Copier le code Le code est le suivant :

 
 

Vous pouvez ajouter une déclaration comme celle-ci à côté des produits affichés dans show.html :
Ajouter au Shopping Che
où le lien représente le cadre de navigation. Le tableau arrOrders est défini dans la page link.html pour stocker l'identifiant du produit. La fonction addToOrders() est utilisée pour répondre à l'événement de clic. du lien [Achat] à côté du produit. Il Le paramètre reçu id représente l'identifiant du produit Dans l'exemple, il s'agit d'un produit avec l'identifiant 32068 :

.

Copier le code Le code est le suivant :

De cette façon, vous pouvez utiliser arrOrders pour préparer tous les produits à être achetés sur la page de paiement ou dans le panier. page de navigation.
Le framework peut diviser une page en plusieurs modules avec des fonctions indépendantes. Chaque module est indépendant les uns des autres, mais peut être connecté via la référence de l'objet window. C'est un mécanisme important dans le développement Web.