Das Fensterobjekt ist das Objekt der obersten Ebene im JavaScript-Browserobjektmodell und enthält mehrere gängige Methoden und Eigenschaften:
1 Neues Fenster öffnen
Kopieren Sie den Codecode wie folgt:
window.open(Seiten-URL,Name,Parameter)
In:
pageURL ist der Pfad des untergeordneten Fensters
Name ist das Handle des untergeordneten Fensters
Parameter sind Fensterparameter (jeder Parameter wird durch Kommas getrennt)
wie:
Kopieren Sie den Codecode wie folgt:
window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars= no,resizable=no,location=no,status=no');
2 Öffnen Sie das modale Fenster
Kopieren Sie den Codecode wie folgt:
window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");
3 Schließen Sie das Fenster, ohne dass das Eingabeaufforderungsfeld angezeigt wird
Wenn die Webseite nicht über ein Skriptprogramm (window.open()) geöffnet wird, muss vor dem Aufruf des Skripts window.close() zum Schließen des Fensters das window.opener-Objekt auf Null gesetzt werden, andernfalls wird der Browser (IE7, IE8) erscheint ein OK. Schließen Sie das Dialogfeld.
Kopieren Sie den Codecode wie folgt:
<script language="javaScript">
Funktion closeWindow()
{
window.opener = null;
window.open('', '_self', '');
window.close();
}
</script>
<input type='button' value='Fenster schließen' onClick="closeWindow()">
oder
<input type="button" value="Fenster schließen" onClick="window.opener = null;
window.open('', '_self', '');window.close()">
Zum Schließen von Rahmenfenstern
Kopieren Sie den Codecode wie folgt:
<script language="javaScript">
Funktion closeWindow()
{
window.opener = null;
window.open('', '_top', '');
window.parent.close();
}
</script>
4 Standortobjektnutzung
Kopieren Sie den Codecode wie folgt:
window.location.reload();//Aktualisieren Sie die aktuelle Seite
window.location.href="http://www.cnblogs.com/zhouhb/" //Andere Seiten laden
5 Verwendung des History-Objekts
Kopieren Sie den Codecode wie folgt:
window.history.go(1); //Weiterleiten
window.history.go(-1); //Zurück
6 Das untergeordnete Formular übergibt Werte an das übergeordnete Formular
6.1 Einfache Methode
(1) Öffnen Sie das Unterformular im übergeordneten Formular
Kopieren Sie den Codecode wie folgt:
var str=window.showModalDialog("s.html");
if(str!=null)
{
var v=document.getElementById("v");
v.value+=str;
}
(2) Unterformularcode
Kopieren Sie den Codecode wie folgt:
var v=document.getElementById("v");
window.parent.returnValue=v.value;
window.close();
Darüber hinaus können Sie für das von showModalDialog geöffnete Fenster auch Werte über dialogArguments übergeben:
Code des übergeordneten Fensters:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
Funktion opendialog()
{
window.showModalDialog("child.html",window,"win","resable=false");//Hier wird das Fensterobjekt als Parameter übergeben
}
</script>
</head>
<Körper>
<Formular>
<input type="text" id="name" />
<input type="button" id="open" value="open" onclick="opendialog()"/>
</form>
</body>
</html>
Unterfenstercode:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
Funktion updateParent()
{
var pwin=window.dialogArguments;//Das untergeordnete Fenster erhält die übergebenen Parameter
if(pwin!=undefiniert)
{
pwin.document.getElementById("name").value=document.getElementById("name").value;
}
}
</script>
</head>
<Körper>
<Formular>
<input type="text" id="name" />
<input type="button" id="update" value="Übergeordnetes Fenster aktualisieren" onclick="updateParent()"/>
</form>
</body>
</html>
Für das von showModalDialog geöffnete Fenster können Sie den Wert auch über window.returnValue übergeben:
Hauptfenster:
Kopieren Sie den Codecode wie folgt:
<SCRIPT type="text/javascript">
Funktion openWindow(){
var bankCard=window.showModalDialog("counter.html","","dialogWidth=400px;dialogHeight=200px");
warning("Ihr Bankkarten-Passwort lautet „+bankCard+"/n");
}
</SCRIPT>
(2) Fenster öffnen
Kopieren Sie den Codecode wie folgt:
<KOPF>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>Fensterübungen</TITLE>
<SCRIPT type="text/javascript" language="javascript">
Funktion closeWindow(){
window.returnValue=document.myform.cardPass.value;
window.close();
}
</SCRIPT>
</HEAD>
<KÖRPER>
<FORM name="myform" action="" method="post">
Kontoinformationen:<BR>
Bitte bewahren Sie Ihre Kontoinformationen ordnungsgemäß auf, um Verluste zu vermeiden<BR>
Kontonummer: <INPUT name="cardNum" type="text" size="40"><BR>
Passwort: <INPUT name="cardPass" type="password" size="45"><BR>
<INPUT type="button" name="btn" value="Confirm" onClick="closeWindow()">
</FORM>
</BODY>
6.2 Eine detailliertere Einführung
Wie wir alle wissen, kann die Funktion window.open() zum Öffnen eines neuen Fensters verwendet werden. Wie kann man also den Wert an das übergeordnete Formular im untergeordneten Formular übergeben? Tatsächlich können Sie die Referenz des übergeordneten Formulars über das Fenster abrufen .Öffner.
Wenn wir beispielsweise ein neues Formular FatherPage.htm erstellen:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
functionOpenChildWindow()
{
window.open('ChildPage.htm');
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
Dann können Sie in ChildPage.htm über window.opener auf die Elemente im übergeordneten Formular zugreifen:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
Funktion SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
Tatsächlich können wir beim Öffnen des Unterformulars auch den Elementen des Unterformulars Werte zuweisen, da die Funktion window.open auch einen Verweis auf das Unterformular zurückgibt, sodass FatherPage.htm wie folgt geändert werden kann:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
functionOpenChildWindow()
{
var child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
Indem wir feststellen, ob die Referenz des Unterformulars leer ist, können wir es auch so steuern, dass nur ein Unterformular geöffnet wird:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var Kind
functionOpenChildWindow()
{
if(!child)
child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
Dies allein reicht nicht aus. Beim Schließen des untergeordneten Formulars muss auch die untergeordnete Variable des übergeordneten Formulars gelöscht werden. Andernfalls kann das untergeordnete Formular nach dem Öffnen und anschließenden Schließen nicht erneut geöffnet werden:
Kopieren Sie den Codecode wie folgt:
<body onunload="Unload()">
<script type="text/javascript">
Funktion SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
functionUnload()
{
window.opener.child=null;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</body>