Überblick über Framework-Programmierung
Eine HTML-Seite kann einen oder mehrere Subframes haben, die mit
Referenzen zwischen Frames
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:
window.frames["frameName"];
window.frames.frameName
window.frames[index]
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:
self.frames[ "frameName"]
self.frames[0]
frames[0]
frameName
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.
Im Folgenden werden die gegenseitigen Bezüge zwischen verschiedenen Framework-Ebenen vorgestellt:
1. Referenz vom übergeordneten Frame zum untergeordneten Frame
Wenn Sie die oben genannten Prinzipien kennen, ist es sehr einfach, den untergeordneten Frame vom übergeordneten Frame aus zu referenzieren, das heißt:
window.frames["frameName"];
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:
window.frames["frameName"].frames["frameName2"];
Auf diese Weise der zweite Auf den Unterrahmen auf -Ebene wird verwiesen, und so weiter kann ein mehrschichtiges Rahmenwerk implementiert werden.
2. Referenz vom untergeordneten Frame zum übergeordneten Frame
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.
3. Referenzen zwischen Geschwister-Frameworks
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:
Du Sie können die folgende Anweisung in Frame1 verwenden, um auf Frame2 zu verweisen:
self .parent.frames["frame2"];
4. Gegenseitige Bezüge zwischen Frameworks auf verschiedenen Ebenen
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:
self.parent.frames["childName"].frames[" targetFrameName"];
5. Verweis auf den Top-Level-Frame
Ä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:
//Bestimmen Sie, ob dieser Frame ein Top-Level-Frame ist
if(self==top){
//dosomething
}
Ändern Sie die Ladeseite des Frames
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:
window.frames[0].location="1.html";
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.
Referenzieren von JavaScript-Variablen und -Funktionen in anderen Frameworks
Bevor wir die Technik des Referenzierens von JavaScript-Variablen und -Funktionen in anderen Frameworks vorstellen, werfen wir einen Blick auf den folgenden Code:
function hello(){
warning("hello,ajax!" );
}
window.hello();
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:
var a=1;
alert(window.a);[/code]
ö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.
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.
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:
Angenommen, die linke Seite ist link.html und die rechte Seite ist show.html. Die Seitenstruktur ist wie folgt:
Neues Dokument
Sie können eine Anweisung wie diese neben den in show.html angezeigten Produkten hinzufügen:
Zum Einkaufen hinzufügen Che
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:
var arrOrders=new Array();
function addToOrders(id){
arrOrders.push( id);
}
Auf diese Weise können Sie arrOrders verwenden, um alle Produkte auf der Checkout-Seite oder der Warenkorb-Seite zum Kauf vorzubereiten.
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.