Aperçu de la programmation-cadre
Une page HTML peut avoir un ou plusieurs sous-cadres. Ces sous-cadres sont marqués par
Références entre les images
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 images. objets, etc. La différence est que ces collections sont des propriétés du document. Ainsi, pour référencer un sous-frame, vous pouvez utiliser la syntaxe suivante :
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 de la page Frame, les méthodes d'écriture suivantes sont équivalentes :
self.frames[ "frameName"]
self.frames[0]
frames[0]
frameName
Chaque frame correspond à une page HTML, donc ceci frame est également une fenêtre de navigateur indépendante. Elle possède toutes les propriétés d'une fenêtre. La référence au frame est également 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 cadre parent au cadre 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 :
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 :
window.frames["frameName"].frames["frameName2"];
De cette façon, le deuxième -Le sous-trame de niveau est référencé, et ainsi de suite, un cadre multicouche peut être implémenté en citation.
2. Référence du frame enfant au frame parent
Chaque objet fenêtre possède un attribut parent, représentant 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 frameworks frères
Si deux frames sont des sous-frames d'un 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 2 sous-frames :
Vous peut utiliser l'instruction suivante dans frame1 Pour référencer frame2 :
self .parent.frames["frame2"];
4. Références mutuelles entre cadres à différents niveaux
La hiérarchie des frames concerne les frames 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 :
self.parent.frames["childName"].frames[" targetFrameName"];
5. Référence au cadre de niveau supérieur
Semblable à l'attribut parent, l'objet window possède é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 :
//Déterminez si ce cadre est un cadre de niveau supérieur
if(self==top){
//dosomething
}
Changer la page de chargement du cadre
La référence au cadre est une référence à l'objet fenêtre. En utilisant l'attribut location de l'objet fenêtre, vous pouvez modifier la navigation du cadre, par exemple :
window.frames[0].location="1.html";
Cela redirigera le page du premier cadre de la page à 1 .html, en profitant de cette propriété, vous pouvez même utiliser un seul lien pour mettre à jour plusieurs cadres.
Référencement de variables et de fonctions JavaScript dans d'autres frameworks
Avant d'introduire la technique de référencement de variables et de fonctions JavaScript dans d'autres frameworks, jetons un œil au code suivant :
function hello(){
alert("hello,ajax!" );
}
window.hello();
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 :
var a=1;
alert(window.a);[/code]
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 :
Nouveau document
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 id reçu représente l'ID du produit Dans l'exemple, il s'agit d'un produit avec un ID de 32068 :
var arrOrders=new Array();
function addToOrders(id){
arrOrders.push( identifiant);
}
De cette façon, vous pouvez utiliser arrOrders pour préparer tous les produits à être achetés sur la page de paiement ou sur la page de navigation du panier.
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. Dans le développement Ajax, vous pouvez également utiliser des cadres cachés pour implémenter diverses techniques. Lors de l'introduction ultérieure d'exemples de programmation Ajax, vous constaterez que cette technologie sera utilisée pour télécharger des fichiers sans actualiser et résoudre les problèmes d'Ajax en avant et en arrière.