Aperçu de la programmation-cadre Une page HTML peut avoir un ou plusieurs sous-cadres. Ces sous-cadres sont marqués par La programmation-cadre discutée ici inclut l'autocontrôle des frameworks et l'accès mutuel entre les frameworks, comme le référencement de variables JavaScript dans un autre framework à partir d'un framework, l'appel de fonctions dans d'autres frameworks, le contrôle du comportement des formulaires dans un autre framework, etc. </p> <p><strong>Références entre les images</strong></p> <p>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 : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31669" class="copybut" id="copybut31669" onclick="doCopy('code31669')"><u> Copiez le code </u></a></span> Le code est le suivant : </div> <div class="codebody" id="code31669">window.frames["frameName"];<br>window.frames.frameName<br>window.frames[index]</div> <br>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 : <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="23383" class="copybut" id="copybut23383" onclick="doCopy('code23383')"><u>Copier le code</u></a></span> Le code est le suivant : </div> <div class="codebody" id="code23383">self.frames[ "frameName"]<br>self.frames[0]<br>frames[0]<br>frameName</div> <br>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. <p>Ce qui suit présente les références mutuelles entre les différents niveaux de frameworks : </p> <p><strong>1． Référence du cadre parent au cadre enfant</strong></p> <p>Connaissant les principes ci-dessus, il est très simple de référencer le frame enfant à partir du frame parent, c'est-à-dire : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="1357" class="copybut" id="copybut1357" onclick="doCopy('code1357')"><u>Copier le code</u></a></span> Le code est le suivant : </div> <div class="codebody" id="code1357">window.frames["frameName"];</div> <br>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 : <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="40877" class="copybut" id="copybut40877" onclick="doCopy('code40877')"><u>Copier code</u></a></span> Le code est le suivant : </div> <div class="codebody" id="code40877">window.frames["frameName"].frames["frameName2"];</div> <br>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. <p><strong>2． Référence du frame enfant au frame parent </strong></p> <p>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. </p> <p><strong>3． Références entre frameworks frères </strong></p> <p>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 : <br></p> <div class="codetitle"> <span>. <a style="CURSOR: pointer" data="22315" class="copybut" id="copybut22315" onclick="doCopy('code22315')"> <u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code22315"><frameset rows="50%,50%"><br> <frame src ="1.html" name="frame1" /><br> <frame src="2.html" name="frame2" /><br></frameset></div> <br>Vous peut utiliser l'instruction suivante dans frame1 Pour référencer frame2 : <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="4561" class="copybut" id="copybut4561" onclick="doCopy('code4561')"><u>Copier le code </u></a></span> Le code est le suivant : </div> <div class="codebody" id="code4561">self .parent.frames["frame2"]; </div> <p><strong>4． Références mutuelles entre cadres à différents niveaux</strong></p> <p>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 : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31264" class="copybut" id="copybut31264" onclick="doCopy('code31264')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code31264">self.parent.frames["childName"].frames[" targetFrameName"];</div> <p><strong>5． Référence au cadre de niveau supérieur </strong></p> <p>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 : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="51154" class="copybut" id="copybut51154" onclick="doCopy('code51154')"><u>Copier le code</u></a></span> Codez comme suit :</div> <div class="codebody" id="code51154">//Déterminez si ce cadre est un cadre de niveau supérieur<br>if(self==top){<br> //dosomething<br>} </div> <p><strong>Changer la page de chargement du cadre</strong></p> <p>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 : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="18042" class="copybut" id="copybut18042" onclick="doCopy('code18042')"><u>Copier le code </u></a></span> Le code est le suivant : </div> <div class="codebody" id="code18042">window.frames[0].location="1.html";</div> <br>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. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="17379" class="copybut" id="copybut17379" onclick="doCopy('code17379')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code17379"><frameset rows="50%,50%" ><br> <frame src="1.html" name="frame1" /><br> <frame src="2.html" name="frame2" /><br></ frameset>< ;!--somecode--><br><a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a> ;<BR><!--somecode--></div> <p><strong>Référencement de variables et de fonctions JavaScript dans d'autres frameworks<br></strong><br>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 : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92811" class="copybut" id="copybut92811" onclick="doCopy('code92811')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code92811">function hello(){<br> alert("hello,ajax!" );<br> }<br>window.hello();</div> <br>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 : <br>var a=1;<br>alert(window.a);[/code]<br> 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. <br>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. <br>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 : <br> 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 : <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="66513" class="copybut" id="copybut66513" onclick="doCopy('code66513')"><u>. Copier le code </u></a></span> Le code est le suivant :</div> <div class="codebody" id="code66513"> <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br><html><br> <head><br><title> Nouveau document </title><br></head><br><frameset cols="20%,80%" ><br> <frame src ="link.html" name="link" /><br> <frame src="show.html" name="show" /><br></ jeu de cadres><br></html> ;<BR></div></P> <P>Vous pouvez ajouter une déclaration comme celle-ci à côté des produits affichés dans show.html : <BR><a href="void(0)" onclick="self.parent.link.addToOrders(32068)"> Ajouter au Shopping Che</a><br>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 : <br><div class="codetitle"><span><a style="CURSOR: pointer" data="18851" class="copybut" id="copybut18851" onclick="doCopy('code18851')"><.>Copiez le code <u></u></.></a> Le code est le suivant : </span></div>var arrOrders=new Array();<div class="codebody" id="code18851">function addToOrders(id){<br> arrOrders.push( identifiant);<br>}<br><br>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. <br>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. </div> </div>
