L'objet window est l'objet de niveau supérieur dans le modèle objet du navigateur JavaScript et contient plusieurs méthodes et propriétés courantes :
1 Ouvrir une nouvelle fenêtre
Copiez le code comme suit :
window.open (pageURL, nom, paramètres)
dans:
pageURL est le chemin de la fenêtre enfant
le nom est le handle de la fenêtre enfant
Les paramètres sont des paramètres de fenêtre (chaque paramètre est séparé par des virgules)
comme:
Copiez le code comme suit :
window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars= non,resizing=non,emplacement=non,statut=non');
2 Ouvrez la fenêtre modale
Copiez le code comme suit :
window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");
3 Fermez la fenêtre sans afficher la boîte de dialogue
Si la page Web n'est pas ouverte via un programme de script (window.open()), avant d'appeler le script window.close() pour fermer la fenêtre, l'objet window.opener doit être défini sur null, sinon le navigateur (IE7, IE8) affichera un message OK Fermez la boîte de dialogue.
Copiez le code comme suit :
<langage de script="javaScript">
fonction closeWindow()
{
fenêtre.opener = null ;
window.open('', '_self', '');
window.close();
}
</script>
<input type='button' value='Fermer la fenêtre' onClick="closeWindow()">
ou
<input type="button" value="Fermer la fenêtre" onClick="window.opener = null;
window.open('', '_self', '');window.close()">
Pour fermer la fenêtre du cadre
Copiez le code comme suit :
<langage de script="javaScript">
fonction closeWindow()
{
fenêtre.opener = null ;
window.open('', '_top', '');
window.parent.close();
}
</script>
4 utilisation des objets de localisation
Copiez le code comme suit :
window.location.reload();//Actualiser la page actuelle
window.location.href="http://www.cnblogs.com/zhouhb/"; //Charger d'autres pages
5 Utilisation de l'objet historique
Copiez le code comme suit :
window.history.go(1); //Avant
window.history.go(-1); //Retour
6 Le formulaire enfant transmet les valeurs au formulaire parent
6.1 Méthode simple
(1) Ouvrez le sous-formulaire dans le formulaire parent
Copiez le code comme suit :
var str=window.showModalDialog("s.html");
si(str!=null)
{
var v=document.getElementById("v");
v.value+=str;
}
(2) Code du sous-formulaire
Copiez le code comme suit :
var v=document.getElementById("v");
window.parent.returnValue=v.value;
window.close();
De plus, pour la fenêtre ouverte par showModalDialog, vous pouvez également transmettre des valeurs via dialogArguments :
Code de la fenêtre parent :
Copiez le code comme suit :
<!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">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
fonction dialogue ouvert()
{
window.showModalDialog("child.html",window,"win","resable=false");//Ici, l'objet window est passé en paramètre
}
</script>
</tête>
<corps>
<formulaire>
<input type="text" id="nom" />
<input type="button" id="open" value="open" onclick="opendialog()"/>
</form>
</corps>
</html>
Code de sous-fenêtre :
Copiez le code comme suit :
<!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">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
fonction updateParent()
{
var pwin=window.dialogArguments;//La fenêtre enfant obtient les paramètres passés
si(pwin!=indéfini)
{
pwin.document.getElementById("name").value=document.getElementById("name").value;
}
}
</script>
</tête>
<corps>
<formulaire>
<input type="text" id="nom" />
<input type="button" id="update" value="Mettre à jour la fenêtre parent" onclick="updateParent()"/>
</form>
</corps>
</html>
Pour la fenêtre ouverte par showModalDialog, vous pouvez également transmettre la valeur via window.returnValue :
Fenêtre principale :
Copiez le code comme suit :
<SCRIPT type="text/javascript">
fonction openWindow(){
var bankCard=window.showModalDialog("counter.html","","dialogWidth=400px;dialogHeight=200px");
alert("Le mot de passe de votre carte bancaire est "+bankCard+"/n");
}
</SCRIPT>
(2) Ouvrir la fenêtre
Copiez le code comme suit :
<TÊTE>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>Exercices de fenêtre</TITLE>
<SCRIPT type="text/javascript" langage="javascript">
fonction closeWindow(){
window.returnValue=document.myform.cardPass.value;
window.close();
}
</SCRIPT>
</HEAD>
<CORPS>
<FORM nom="monformulaire" action="" méthode="post">
Informations sur le compte :<BR>
Veuillez conserver correctement les informations de votre compte pour éviter les pertes<BR>
Numéro de compte : <INPUT name="cardNum" type="text" size="40"><BR>
Mot de passe : <INPUT name="cardPass" type="password" size="45"><BR>
<INPUT type="button" name="btn" value="Confirm" onClick="closeWindow()">
</FORM>
</CORPS>
6.2 Une introduction plus détaillée
Comme nous le savons tous, la fonction window.open() peut être utilisée pour ouvrir une nouvelle fenêtre, alors comment transmettre la valeur au formulaire parent dans le formulaire enfant. En fait, vous pouvez obtenir la référence du formulaire parent via window ? .ouvreur.
Par exemple, si nous créons un nouveau formulaire FatherPage.htm :
Copiez le code comme suit :
<script type="text/javascript">
fonctionOpenChildWindow()
{
window.open('ChildPage.htm');
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
Ensuite, dans ChildPage.htm, vous pouvez accéder aux éléments du formulaire parent via window.opener :
Copiez le code comme suit :
<script type="text/javascript">
fonction 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()" />
En fait, lors de l'ouverture du sous-formulaire, nous pouvons également attribuer des valeurs aux éléments du sous-formulaire, car la fonction window.open renverra également une référence au sous-formulaire, donc FatherPage.htm peut être modifié comme :
Copiez le code comme suit :
<script type="text/javascript">
fonctionOpenChildWindow()
{
var enfant = window.open('ChildPage.htm');
enfant.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
En déterminant si la référence du sous-formulaire est vide, on peut également lui contrôler pour n'ouvrir qu'un seul sous-formulaire :
Copiez le code comme suit :
<script type="text/javascript">
enfant du Var
fonctionOpenChildWindow()
{
si(!enfant)
enfant = window.open('ChildPage.htm');
enfant.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
Cela ne suffit pas. Lorsque le formulaire enfant est fermé, la variable enfant du formulaire parent doit également être effacée. Sinon, le formulaire enfant ne peut pas être rouvert après son ouverture puis sa fermeture :
Copiez le code comme suit :
<body onunload="Décharger()">
<script type="text/javascript">
fonction SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
fonctionDécharger()
{
window.opener.child=null;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</corps>