Heim > Artikel > Web-Frontend > Zusammenfassung der JavaScript-Framework-Operationen (Iframe)_Javascript-Kenntnisse

Zusammenfassung der JavaScript-Framework-Operationen (Iframe)_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 16:52:131040Durchsuche

Überblick über Framework-Programmierung

Eine HTML-Seite kann einen oder mehrere Subframes haben, die mit gekennzeichnet sind. Die hier besprochene Framework-Programmierung umfasst die Selbstkontrolle von Frameworks und den gegenseitigen Zugriff zwischen Frameworks, z. B. das Referenzieren von JavaScript-Variablen in einem anderen Framework von einem Framework aus, das Aufrufen von Funktionen in anderen Frameworks, die Steuerung des Verhaltens von Formularen in einem anderen Framework usw. </p> <p><strong>Referenzen zwischen Frames</strong></p> <p>Alle Frames auf einer Seite werden als Attribute des Fensterobjekts in Form einer Sammlung bereitgestellt. Beispiel: window.frames stellt die Sammlung aller Frames auf der Seite dar. Dies ähnelt Formularobjekten, Linkobjekten und Bildern Objekte usw. Der Unterschied besteht darin, dass diese Sammlungen Eigenschaften des Dokuments sind. Um auf einen Unterrahmen zu verweisen, können Sie daher die folgende Syntax verwenden: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31669" class="copybut" id="copybut31669" onclick="doCopy('code31669')"><u> Kopieren Sie den Code </u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code31669">window.frames["frameName"];<br>window.frames.frameName<br>window.frames[index]</div> <br>Unter diesen kann das Wort window auch durch self ersetzt oder weggelassen werden, Unter der Annahme, dass „frameName“ der erste Frame auf der Seite ist, sind die folgenden Schreibmethoden gleichwertig: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="23383" class="copybut" id="copybut23383" onclick="doCopy('code23383')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code23383">self.frames[ "frameName"]<br>self.frames[0]<br>frames[0]<br>frameName</div> <br>Jeder Frame entspricht einer HTML-Seite, also dies Frame ist ebenfalls ein eigenständiges Browserfenster. Es verfügt über alle Eigenschaften eines Fensters. Die sogenannte Referenz auf das Frame ist auch eine Referenz auf das Fensterobjekt. Mit diesem Fensterobjekt können Sie die darin enthaltenen Seiten problemlos bedienen, z. B. mithilfe des window.document-Objekts Daten auf die Seite schreiben, mithilfe der window.location-Eigenschaft die Seite im Frame ändern usw. <p>Im Folgenden werden die gegenseitigen Bezüge zwischen verschiedenen Framework-Ebenen vorgestellt: </p> <p><strong>1． Referenz vom übergeordneten Frame zum untergeordneten Frame</strong></p> <p>Wenn Sie die oben genannten Prinzipien kennen, ist es sehr einfach, den untergeordneten Frame vom übergeordneten Frame aus zu referenzieren, das heißt: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="1357" class="copybut" id="copybut1357" onclick="doCopy('code1357')"><u>Kopieren Sie den Code</u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code1357">window.frames["frameName"];</div> <br>Dies bezieht sich auf den Unterrahmen mit dem Namen „frameName“ auf der Seite. Wenn Sie einen Subframe innerhalb eines Subframes referenzieren möchten, können Sie dies entsprechend der Art des referenzierten Frames, bei dem es sich tatsächlich um das Fensterobjekt handelt, wie folgt implementieren: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="40877" class="copybut" id="copybut40877" onclick="doCopy('code40877')"><u>Kopieren Code</u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code40877">window.frames["frameName"].frames["frameName2"];</div> <br>Auf diese Weise der zweite Auf den Unterrahmen auf -Ebene wird verwiesen, und so weiter kann ein mehrschichtiges Rahmenwerk implementiert werden. <p><strong>2． Referenz vom untergeordneten Frame zum übergeordneten Frame </strong></p> <p>Jedes Fensterobjekt verfügt über ein übergeordnetes Attribut, das seinen übergeordneten Rahmen darstellt. Wenn der Frame bereits ein Frame der obersten Ebene ist, stellt window.parent auch den Frame selbst dar. </p> <p><strong>3． Referenzen zwischen Geschwister-Frameworks </strong></p> <p>Wenn zwei Frames Unterframes desselben Frames sind, werden sie als Geschwisterframes bezeichnet und können über den übergeordneten Frame aufeinander verweisen. Eine Seite enthält beispielsweise zwei Unterframes: <br></p> <div class="codetitle"> <span> <a style="CURSOR: pointer" data="22315" class="copybut" id="copybut22315" onclick="doCopy('code22315')"> <u>Code kopieren</u></a></span> Der Code lautet wie folgt:</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>Du Sie können die folgende Anweisung in Frame1 verwenden, um auf Frame2 zu verweisen: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="4561" class="copybut" id="copybut4561" onclick="doCopy('code4561')"><u>Code kopieren </u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code4561">self .parent.frames["frame2"]; </div> <p><strong>4． Gegenseitige Bezüge zwischen Frameworks auf verschiedenen Ebenen</strong></p> <p>Die Hierarchie der Frames gilt für Frames der obersten Ebene. Wenn die Ebenen unterschiedlich sind und Sie die Ebene, auf der Sie sich befinden, sowie die Ebene und den Namen des anderen Rahmens kennen, können Sie problemlos aufeinander zugreifen, indem Sie die Eigenschaften des Fensterobjekts verwenden, auf das der Rahmen verweist, zum Beispiel: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31264" class="copybut" id="copybut31264" onclick="doCopy('code31264')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code31264">self.parent.frames["childName"].frames[" targetFrameName"];</div> <p><strong>5． Verweis auf den Top-Level-Frame </strong></p> <p>Ähnlich wie das übergeordnete Attribut verfügt auch das Fensterobjekt über ein oberes Attribut. Es stellt einen Verweis auf den Top-Level-Frame dar, der verwendet werden kann, um zu bestimmen, ob ein Frame selbst ein Top-Level-Frame ist, zum Beispiel: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="51154" class="copybut" id="copybut51154" onclick="doCopy('code51154')"><u>Code kopieren</u></a></span>Code wie folgt:</div> <div class="codebody" id="code51154">//Bestimmen Sie, ob dieser Frame ein Top-Level-Frame ist<br>if(self==top){<br> //dosomething<br>} </div> <p><strong>Ändern Sie die Ladeseite des Frames</strong></p> <p>Der Verweis auf den Rahmen ist ein Verweis auf das Fensterobjekt. Mithilfe des Standortattributs des Fensterobjekts können Sie die Navigation des Rahmens ändern, zum Beispiel: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="18042" class="copybut" id="copybut18042" onclick="doCopy('code18042')"><u>Code kopieren </u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code18042">window.frames[0].location="1.html";</div> <br>Dadurch wird der umgeleitet Seite des ersten Frames auf der Seite in 1.html um. Mithilfe dieser Eigenschaft können Sie sogar einen einzelnen Link verwenden, um mehrere Frames zu aktualisieren. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="17379" class="copybut" id="copybut17379" onclick="doCopy('code17379')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</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>Referenzieren von JavaScript-Variablen und -Funktionen in anderen Frameworks<br></strong><br>Bevor wir die Technik des Referenzierens von JavaScript-Variablen und -Funktionen in anderen Frameworks vorstellen, werfen wir einen Blick auf den folgenden Code: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92811" class="copybut" id="copybut92811" onclick="doCopy('code92811')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code92811">function hello(){<br> warning("hello,ajax!" );<br> }<br>window.hello();</div> <br>Wenn Sie diesen Code ausführen, wird ein „Hallo, Ajax!“-Fenster angezeigt, das das Ergebnis der Ausführung der hello()-Funktion ist . Warum wurde hello() zu einer Methode des Fensterobjekts? Denn alle innerhalb einer Seite definierten globalen Variablen und globalen Funktionen sind Mitglieder des Fensterobjekts. Beispiel: <br>var a=1;<br>alert(window.a);[/code]<br> öffnet ein Dialogfeld mit der Anzeige 1. Das gleiche Prinzip gilt für die gemeinsame Nutzung von Variablen und Funktionen zwischen verschiedenen Frameworks, indem diese über das Fensterobjekt aufgerufen werden. <br>Beispiel: Eine Produkt-Browsing-Seite besteht aus zwei Unterrahmen. Wenn der Benutzer auf den Kategorie-Link klickt, wird auf der rechten Seite die entsprechende Produktliste angezeigt Klicken Sie auf den Link [Kaufen] neben dem Produkt. Artikel in den Warenkorb legen. <br>In diesem Beispiel können Sie die linke Navigationsseite verwenden, um die Produkte zu speichern, die der Benutzer kaufen möchte, denn wenn der Benutzer auf den Navigationslink klickt, ändert sich eine andere Seite, die Produktanzeigeseite, während die Navigationsseite selbst bestehen bleibt unverändert, sodass die darin enthaltenen JavaScript-Variablen nicht verloren gehen und zum Speichern globaler Daten verwendet werden können. Das Implementierungsprinzip lautet wie folgt: <br> Angenommen, die linke Seite ist link.html und die rechte Seite ist show.html. Die Seitenstruktur ist wie folgt: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="66513" class="copybut" id="copybut66513" onclick="doCopy('code66513')"><u> Code kopieren </u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code66513"> <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br><html><br> <head><br><title> Neues Dokument </title><br></head><br><frameset cols="20%,80%" ><br> <frame src="link.html" name="link" /><br> <frame src="show.html" name="show" /><br></ Frameset><br></html&gt ;<BR></div></P> <P>Sie können eine Anweisung wie diese neben den in show.html angezeigten Produkten hinzufügen: <BR><a href="void(0)" onclick="self.parent.link.addToOrders(32068)"> Zum Einkaufen hinzufügen Che</a><br>wobei link den Navigationsrahmen darstellt. Das Array arrOrders ist auf der Seite link.html definiert, um die ID des Produkts zu speichern. Die Funktion addToOrders() wird verwendet, um auf das Klickereignis zu reagieren des Links [Kauf] neben dem Produkt. Der empfangene Parameter id stellt die ID des Produkts dar. Im Beispiel handelt es sich um ein Produkt mit der ID 32068: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="18851" class="copybut" id="copybut18851" onclick="doCopy('code18851')"><u>Kopieren Sie den Code </u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code18851">var arrOrders=new Array();<br>function addToOrders(id){<br> arrOrders.push( id);<br>}</div> <br>Auf diese Weise können Sie arrOrders verwenden, um alle Produkte auf der Checkout-Seite oder der Warenkorb-Seite zum Kauf vorzubereiten. <br>Das Framework kann eine Seite in mehrere Module mit unabhängigen Funktionen unterteilen. Jedes Modul ist unabhängig voneinander, kann jedoch über die Referenz des Fensterobjekts verbunden werden. Dies ist ein wichtiger Mechanismus in der Webentwicklung. In der Ajax-Entwicklung können Sie auch versteckte Frames verwenden, um verschiedene Techniken zu implementieren. Wenn Sie später die Ajax-Beispielprogrammierung einführen, werden Sie feststellen, dass diese Technologie zum Hochladen von Dateien ohne Aktualisierung verwendet wird und die Vorwärts- und Rückwärtsprobleme von Ajax löst. </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Einführung in Javascript WebSocket-Nutzungsbeispiele (kurzes Einführungs-Tutorial)_Grundkenntnisse" href="https://m.php.cn/de/faq/13342.html">Einführung in Javascript WebSocket-Nutzungsbeispiele (kurzes Einführungs-Tutorial)_Grundkenntnisse</a></span><span>Nächster Artikel：<a class="dBlack" title="Einführung in Javascript WebSocket-Nutzungsbeispiele (kurzes Einführungs-Tutorial)_Grundkenntnisse" href="https://m.php.cn/de/faq/13344.html">Einführung in Javascript WebSocket-Nutzungsbeispiele (kurzes Einführungs-Tutorial)_Grundkenntnisse</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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>