Maison > Article > interface Web > Fonctionnement du framework JavaScript (iframe) summary_javascript skills

Fonctionnement du framework JavaScript (iframe) summary_javascript skills

WBOYoriginal: 2016-05-16 16:52:131025parcourir

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>&lt ;!--somecode--><br><a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a&gt ;<BR></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&gt ;<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></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Introduction aux exemples d'utilisation de Javascript WebSocket (tutoriel d'introduction concis)_Connaissances de base" href="http://m.php.cn/fr/faq/13342.html">Introduction aux exemples d'utilisation de Javascript WebSocket (tutoriel d'introduction concis)_Connaissances de base</a></span><span>Article suivant：<a class="dBlack" title="Introduction aux exemples d'utilisation de Javascript WebSocket (tutoriel d'introduction concis)_Connaissances de base" href="http://m.php.cn/fr/faq/13344.html">Introduction aux exemples d'utilisation de Javascript WebSocket (tutoriel d'introduction concis)_Connaissances de base</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>