Referenzen zwischen Frameworks
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, Bildobjekten usw ., aber 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:
Kopieren Sie den Codecode wie folgt:
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:
Kopieren Sie den Codecode wie folgt:
self.frames["frameName"]
self.frames[0]
Rahmen[0]
FrameName
Jeder Frame entspricht einer HTML-Seite, daher ist dieser Frame auch ein eigenständiges Browserfenster. Er verfügt über alle Eigenschaften eines Fensters. Der sogenannte Verweis auf den Frame ist ein Verweis 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, vom übergeordneten Frame auf den untergeordneten Frame zu verweisen, d. h.:
Kopieren Sie den Codecode wie folgt:
window.frames["frameName"];
Dies verweist auf den Subframe mit dem Namen „frameName“ innerhalb 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:
Kopieren Sie den Codecode wie folgt:
window.frames["frameName"].frames["frameName2"];
Auf diese Weise wird auf den Sub-Frame der zweiten Ebene verwiesen, und analog kann die Referenz auf mehrschichtige Frameworks erreicht werden.
2. Referenz vom untergeordneten Frame zum übergeordneten Frame
Jedes Fensterobjekt verfügt über eine übergeordnete Eigenschaft, die 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 Geschwisterrahmen
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:
Kopieren Sie den Codecode wie folgt:
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
In Frame1 können Sie die folgende Anweisung verwenden, um auf Frame2 zu verweisen:
Kopieren Sie den Codecode wie folgt:
self.parent.frames["frame2"];
4. Gegenseitige Bezüge zwischen verschiedenen Ebenen von Frameworks
Die Ebene des Frameworks bezieht sich auf das Top-Level-Framework. 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:
Kopieren Sie den Codecode wie folgt:
self.parent.frames["childName"].frames["targetFrameName"];
5. Verweis auf den Frame der obersten Ebene
Ähnlich wie die übergeordnete Eigenschaft verfügt auch das Fensterobjekt über eine obere Eigenschaft. Es stellt einen Verweis auf den Frame der obersten Ebene dar, der verwendet werden kann, um zu bestimmen, ob ein Frame selbst ein Frame der obersten Ebene ist, zum Beispiel:
Kopieren Sie den Codecode wie folgt:
//Bestimmen Sie, ob dieser Frame ein Frame der obersten Ebene ist
if(self==top){
//etwas tun
}
Ä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 die Seite des ersten Frames auf der Seite auf 1.html umgeleitet. Mithilfe dieser Eigenschaft können Sie sogar einen Link verwenden, um mehrere Frames zu aktualisieren.
Kopieren Sie den Codecode wie folgt:
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">Link</a>
<!--somecode-->
Verweisen Sie auf JavaScript-Variablen und -Funktionen in anderen Frameworks
Bevor wir Techniken zum Referenzieren von JavaScript-Variablen und -Funktionen in anderen Frameworks vorstellen, schauen wir uns den folgenden Code an:
Kopieren Sie den Codecode wie folgt:
<script language="JavaScript" type="text/javascript">
<!--
Funktion hallo(){
alarm("Hallo,Ajax!");
}
window.hello();
//-->
</script>
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. Zum Beispiel:
Kopieren Sie den Codecode wie folgt:
var a=1;
alarm(window.a);
Es öffnet sich ein Dialogfeld mit 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. Die linke Seite stellt den Link zur Produktkategorie dar. Wenn der Benutzer auf den Kategorie-Link klickt, wird die entsprechende Produktliste auf der rechten Seite angezeigt. Klicken Sie auf den Link „Kauf“ neben dem Produkt, um den Produkt-Warenkorb hinzuzufügen.
In diesem Beispiel kann die linke Navigationsseite zum Speichern der Produkte verwendet werden, die der Benutzer kaufen möchte, denn wenn der Benutzer auf den Navigationslink klickt, ändert sich eine andere Seite, nämlich die Produktanzeigeseite und die Navigationsseite selbst bleibt unverändert, sodass die JavaScript-Variablen nicht verloren gehen und zum Speichern globaler Daten verwendet werden können. Das Implementierungsprinzip lautet wie folgt:
Angenommen, die Seite links ist link.html und die Seite rechts ist show.html. Die Seitenstruktur ist wie folgt:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<Kopf>
<title> Neues Dokument </title>
</head>
<frameset cols="20%,80%">
<frame src="link.html" name="link" />
<frame src="show.html" name="show" />
</frameset>
</html>
Sie können neben den in show.html angezeigten Produkten eine Anweisung wie diese hinzufügen:
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">Zum Warenkorb hinzufügen</a>
Unter anderem stellt Link das Navigations-Framework dar. 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 des Links [Purchase] zu reagieren Der empfangene Parameter id stellt die ID des Produkts dar. Das Beispiel ist ein Produkt mit der ID 32068:
Kopieren Sie den Codecode wie folgt:
<script language="JavaScript" type="text/javascript">
<!--
var arrOrders=new Array();
Funktion addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
Auf diese Weise können Sie arrOrders auf der Checkout-Seite oder der Warenkorb-Browsing-Seite verwenden, um alle Produkte zum Kauf vorzubereiten.
Das Framework kann eine Seite in mehrere Module mit unabhängigen Funktionen unterteilen, kann jedoch über die Referenz des Fensterobjekts verbunden werden. Dies ist ein wichtiger Mechanismus in der Webentwicklung.