Références entre frameworks
Tous les cadres d'une page sont fournis en tant qu'attributs de l'objet fenêtre sous la forme d'une collection. Par exemple : window.frames représente la collection de tous les cadres de la page. Ceci est similaire aux objets de formulaire, aux objets de lien, aux objets d'image, etc. ., mais la différence est que ces collections sont des propriétés du document. Par conséquent, pour référencer un sous-frame, vous pouvez utiliser la syntaxe suivante :
Copiez le code comme suit :
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 :
Copiez le code comme suit :
self.frames["frameName"]
auto.frames[0]
cadres[0]
nom du cadre
Chaque frame correspond à une page HTML, ce frame est donc également une fenêtre de navigateur indépendante. Il possède toutes les propriétés d'une fenêtre. La référence au frame est une référence à l'objet window. Avec cet objet window, vous pouvez facilement utiliser 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 :
Copiez le code comme suit :
window.frames["frameName"];
Cela fait référence au sous-cadre nommé frameName dans la page. Si vous souhaitez référencer un sous-frame dans un sous-frame, selon la nature du frame référencé, qui est en fait l'objet window, vous pouvez l'implémenter comme ceci :
Copiez le code comme suit :
window.frames["frameName"].frames["frameName2"];
De cette manière, la sous-trame de deuxième niveau est référencée, et par analogie, la référence de cadres multicouches peut être réalisée.
2. Référence du frame enfant au frame parent
Chaque objet fenêtre possède une propriété 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 et sœurs
Si deux frames sont des sous-frames du même frame, ils sont appelés frames frères et peuvent se référencer via le frame parent. Par exemple, une page comprend deux sous-frames :
Copiez le code comme suit :
<lignes du jeu de cadres="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
Dans frame1, vous pouvez utiliser l'instruction suivante pour référencer frame2 :
Copiez le code comme suit :
self.parent.frames["frame2"];
4. Références mutuelles entre différents niveaux de frameworks
Le niveau du framework est destiné au framework de niveau supérieur. Lorsque les niveaux sont différents, tant que vous connaissez le niveau où 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 :
Copiez le code comme suit :
self.parent.frames["childName"].frames["targetFrameName"];
5. Référence au cadre de niveau supérieur
Semblable à la propriété parent, l’objet window possède également une propriété top. Il représente une référence au frame de niveau supérieur, qui peut être utilisée pour déterminer si un frame lui-même est un frame de niveau supérieur, par exemple :
Copiez le code comme suit :
//Détermine si ce frame est un frame de niveau supérieur
si(soi==haut){
// faire quelque chose
}
Changer la page de chargement du framework
La référence au frame est une référence à l'objet window A l'aide de l'attribut location de l'objet window, vous pouvez modifier la navigation dans le frame, par exemple :
window.frames[0].location="1.html";
Cela redirige la page du premier cadre de la page vers 1.html. En profitant de cette propriété, vous pouvez même utiliser un lien pour mettre à jour plusieurs cadres.
Copiez le code comme suit :
<lignes du jeu de cadres="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">lien</a>
<!--somecode-->
Référencer des variables et des fonctions JavaScript dans d'autres frameworks
Avant d'introduire les techniques de référencement des variables et fonctions JavaScript dans d'autres frameworks, examinons le code suivant :
Copiez le code comme suit :
<langage de script="JavaScript" type="text/javascript">
<!--
fonction bonjour(){
alert("Bonjour, ajax!");
}
window.hello();
//-->
</script>
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:
Copiez le code comme suit :
var a = 1 ;
alerte (fenêtre.a);
Une boîte de dialogue apparaîtra 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 vers la catégorie de produits ; lorsque l'utilisateur clique sur le lien de la catégorie, la liste des produits correspondante s'affiche sur le côté droit ; Acheter] lien à côté du produit pour ajouter le panier du produit.
Dans cet exemple, la page de navigation de gauche peut être utilisée 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, c'est-à-dire la page d'affichage du produit et la page de navigation elle-même. reste inchangé, donc les variables JavaScript ne seront pas perdues et pourront être utilisées pour stocker des données globales. Son principe de mise en œuvre est le suivant :
Supposons que la page de gauche soit link.html et la page de droite show.html. La structure de la page est la suivante :
Copiez le code comme suit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<tête>
<title> Nouveau document </title>
</tête>
<frameset cols="20%,80%">
<frame src="link.html" name="link" />
<frame src="show.html" name="show" />
</frameset>
</html>
Vous pouvez ajouter une déclaration comme celle-ci à côté des produits affichés dans show.html :
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">Ajouter au panier</a>
Parmi eux, link représente le framework 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 click du lien [Achat] à côté du. product. Le paramètre id qu'il reçoit représente l'identifiant du produit. L'exemple est un produit avec l'ID 32068 :
Copiez le code comme suit :
<langage de script="JavaScript" type="text/javascript">
<!--
var arrOrders=nouveau tableau();
fonction addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
De cette façon, vous pouvez utiliser arrOrders sur la page de paiement ou sur la page de navigation du panier pour préparer tous les produits à l'achat.
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. Il s'agit d'un mécanisme important dans le développement Web.