8.6 Fernsteuerung
Wie Sie vom aufrufenden Fenster aus auf das neue Fenster zugreifen können, wissen Sie jetzt. In die andere Richtung ist das genauso einfach.
Schon seit JavaScript 1.1 gibt es die Fenster-Eigenschaft opener , die eine Referenz auf das öffnende Fenster darstellt. Sogar mit JavaScript 1.0 kann man sie jedoch relativ einfach nachbilden. Auch wenn das heutzutage nicht mehr relevant ist, zeigt es dennoch, wie Sie Eigenschaften von Objekten in JavaScript dynamisch setzen können. Setzen Sie also die Eigenschaft opener des neuen Fensters, sofern sie gleich null ist, auf das aktuelle Fenster (also self):
<script type="text/javascript"><!--
var fenster = window.open("seite.htm", "neu");
if (fenster.opener == null) {
fenster.opener = self;
}
//--></script>
8.6.1 Links mit JavaScript
Über die Eigenschaft opener ist es möglich, auf das ursprüngliche Fenster zuzugreifen. Im Folgenden soll eine Fernsteuerung entwickelt werden. Ausgangspunkt ist folgendes Frameset:
<html>
<head>
<title>Fernsteuerung</title>
<script type="text/javascript"><!--
function inhalt() {
return "<" + "html" + "><" + "/html" + ">";
}
//--></script>
</head>
<frameset rows="100,*">
<frame src="navi.html" name="navigation" />
<frame src="javascript:top.inhalt()" />
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!</body>
</noframes>
</html>
Die Datei navi.html sieht folgendermaßen aus:
<html>
<head>
<script type="text/javascript"><!--
function fernsteuerung() {
var fenster = window.open("remote.html", "fern", "height=200,width=400,status=1");
if (fenster.opener == null) {
fenster.opener = self;
}
}
//--></script>
</head>
<body>
<a href="javascript:fernsteuerung();">Fernsteuerung öffnen</a>
</body>
</html>
Es passiert also nichts Weltbewegendes: Durch den Klick auf den Link wird ein neues Fenster mit der Datei remote.html geladen. Diese sieht wie folgt aus:
<html>
<head>
<title>Fernsteuerung</title>
<script type="text/javascript"><!--
function lade(seite) {
//kommt noch...
}
//--></script>
</head>
<body>
<h3>Meine Lieblingslinks</h3>
<ul>
<li>
<a href="javascript:lade(
'http://www.microsoft.com/')">Microsoft</a>
</li>
<li>
<a href="javascript:lade(
'http://www.mozilla.com/')">Mozilla</a>
</li>
<li>
<a href="javascript:lade(
'http://www.opera.com/')">Opera</a>
</li>
</ul>
<a href="javascript:window.close();">Fenster schließen</a>
</body>
</html>
In der Funktion lade() muss die übergebene URL in den unteren Frame der Beispielseite geladen werden. Mit der Eigenschaft window.opener hat man eine Referenz auf den oberen Frame, und – wie in Kapitel 10 gezeigt werden wird – man kann dann auf den unteren Frame zugreifen:
function lade(seite) {
if (window.opener != null) {
window.opener.parent.frames[1].location.href = seite;
}
}
8.6.2 Links ohne JavaScript
Eigentlich ist dieses Vorgehen zu umständlich. Man kann auch mit ordinären HTML-Links arbeiten. Als target-Attribut gibt man den Namen des Frames bzw. des Fensters an, in den bzw. in das die neue Seite geladen werden soll.
Im obigen Beispiel wurde jedoch aus Versehen kein Name für den Frame angegeben; bei Fenstern haben Sie ja ohnehin standardmäßig keinen Namen. Mit JavaScript lässt sich dieser Name jedoch ganz einfach vergeben; die entsprechende Eigenschaft heißt name.
Ändern Sie also die Funktion fernsteuerung() folgendermaßen ab:
function fernsteuerung() {
var fenster = window.open("remote.html", "fern",
"height=200,width=400,status=1");
self.name = "Ziel";
if (fenster.opener == null) {
fenster.opener = self;
}
}
Die Fernsteuerung besteht dann aus (beinahe) reinem HTML-Code:
<html>
<head>
<title>Fernsteuerung</title>
</head>
<body>
<h1>Meine Lieblingslinks</h1>
<ul>
<li>
<a href="http://www.microsoft.com/"
target="Ziel">Microsoft</a>
</li>
<li>
<a href="http://www.mozilla.com/"
target="Ziel">Mozilla</a>
</li>
<li>
<a href="http://www.opera.com/"
target="Ziel">Opera</a>
</li>
</ul>
<a href="javascript:window.close();">Fenster schließen
</a>
</body>
</html>
|