JavaScript DHTML/Window Browser/Window Properties — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Версия 13:00, 26 мая 2010

Access window properties

   <source lang="html4strict">
  

<html> <head> <script language="JavaScript">

</script> </head> </html>



 </source>
   
  


Change status bar with mouse click

   <source lang="html4strict">
  

<HTML> <BODY> <FORM> <INPUT type="button" value="Change Status!" onClick="window.status="Hey there!";"> <INPUT type="button" value="Clear Status!" onClick="window.status="";"> </FORM> <A HREF="noplace" onMouseOver="window.location="http://www.wbex.ru";">Mouse over to navigate</A> </BODY> </HTML>


 </source>
   
  


Change window location

   <source lang="html4strict">
  

<HTML> <BODY> <FORM>

   <INPUT TYPE="button" value="wbex.ru" onClick="window.location="http://www.wbex.ru"">
   </FORM>

</BODY> </HTML>


 </source>
   
  


Displaying the Associative Properties Area of a Window Object

   <source lang="html4strict">
  

<HTML> <HEAD> <TITLE>Window Object Properties Array</TITLE> </HEAD> <BODY> <SCRIPT> for (var i in window) {

 document.write ("Window property(" + i +  "): " + 
    window[i] + "
");

} </SCRIPT> </BODY> </HTML>



 </source>
   
  


Modifies the properties and the contents of the browser"s windows

   <source lang="html4strict">
  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML>

 <HEAD>
   <TITLE>JsLib 1.3 - Exemple - fenetres.js</TITLE>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="Author" CONTENT="Etienne CHEVILLARD">
   
   <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">

/* fenetres.js

* Role : modifie les proprietes et le contenu des fenetres du navigateur
* Projet : JsLib
* Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
* Version : 1.3
* Creation : 16/09/2002
* Mise a jour : 23/02/2005
*/

// --- Variables globales --- // gestion des fenetres var fntrs_ids=new Array(100); fntrs_ids[0]="self"; var fntrs_obj=new Array(100); fntrs_obj[0]=self; var fntrs_cpt=1; // --- Fonctions --- // active la fenetre specifiee en lui donnant le focus function activerFenetre(id) {

 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     if (window.focus) {
       fntrs_obj[i].focus();
       return true;
     } else
       return false;
   }
 }
 return false;

} // fin activerFenetre(id) // deplace la fenetre specifiee du nombre de pixels specifie function deplacerFenetreDe(id, px, py) {

 if (isNaN(px)) { px=0; }
 if (isNaN(py)) { py=0; }
 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     fntrs_obj[i].moveBy(px,py);
     return true;
   }
 }
 return false;

} // fin deplacerFenetreDe(id, px, py) // deplace la fenetre specifiee vers les coordonnees specifiees function deplacerFenetreVers(id, x, y) {

 if ((isNaN(x)) || (parseInt(x)<0)) { x=0; }
 if (parseInt(x)>screen.width) { x=screen.width; }
 if ((isNaN(y)) || (parseInt(y)<0)) { y=0; }
 if (parseInt(y)>screen.height) { y=screen.height; }
 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     fntrs_obj[i].moveTo(x,y);
     return true;
   }
 }
 return false;

} // fin deplacerFenetreVers(id, x, y) // desactive la fenetre en lui enlevant le focus function desactiverFenetre(id) {

 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     if (window.blur) {
       fntrs_obj[i].blur();
       return true;
     } else
       return false;
   }
 }
 return false;

} // fin desactiverFenetre(id) // modifie les dimensions de la fenetre specifiee function dimensionsFenetre(id, largeur, hauteur) {

 if ((isNaN(largeur)) || (parseInt(largeur)<10)) { largeur=10; }
 if (parseInt(largeur)>screen.width) { largeur=screen.width; }
 if ((isNaN(hauteur)) || (parseInt(hauteur)<10)) { hauteur=10; }
 if (parseInt(hauteur)>screen.height) { hauteur=screen.height; }
 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     fntrs_obj[i].resizeTo(largeur, hauteur);
     return true;
   }
 }
 return false;

} // fin dimensionsFenetre(id, largeur, hauteur) // ecrit le code HTML specifie dans une nouvelle fenetre function ecrireFenetre(id, texte, prop) {

 var fprp;
 if (!texte) { texte="<HTML><BODY></BODY></HTML>"; }
 if (!prop) {
   fprp="toolbar=1,location=1,directories=1,menubar=1,scrollbars=1,resizable=1,status=1";
 } else {
   fprp=prop;
 }
 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     fntrs_obj[i]=window.open("about:blank", id, fprp);
     fntrs_obj[i].document.open();
     fntrs_obj[i].document.write(texte);
     fntrs_obj[i].document.close();
     if (window.focus) { fntrs_obj[i].focus(); }
     return true;
   }
 }
 fntrs_ids[fntrs_cpt]=id;
 fntrs_obj[fntrs_cpt]=window.open("about:blank", id, fprp);
 fntrs_obj[fntrs_cpt].document.open();
 fntrs_obj[fntrs_cpt].document.write(texte);
 fntrs_obj[fntrs_cpt].document.close();
 if (window.focus) { fntrs_obj[fntrs_cpt].focus(); }
 fntrs_cpt=fntrs_cpt+1;
 return true;

} // ecrireFenetre(id, texte, prop) // ecrit le code HTML specifie dans une nouvelle fenetre en mode plein ecran function ecrirePleinEcran(id, texte) {

 var fprp="fullscreen=1,left=0,top=0,width="+(screen.width-6)+",height="+(screen.height-26);
 ecrireFenetre(id, texte, fprp);
 deplacerFenetreVers(id, 0, 0);
 return true;

} // fin ecrirePleinEcran(id, texte) // ecrit le code HTML specifie dans une nouvelle fenetre de type popup function ecrirePopup(id, texte) {

 var fprp="left="+Math.floor((screen.width-250)/2)+",top="+Math.floor((screen.height-190)/2);
 fprp+=",width=250,height=150,status=0,directories=0,toolbar=0";
 fprp+=",location=0,menubar=0,scrollbars=0,resizable=0";
 ecrireFenetre(id, texte, fprp);
 return true;

} // fin ecrirePopup(id, texte) // modifie le contenu de la barre d"etat de la fenetre specifiee function etatFenetre(id, texte) {

 if (!texte) { texte=""; }
 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     fntrs_obj[i].defaultStatus=texte;
     fntrs_obj[i].status=texte;
     return true;
   }
 }
 return false;

} // fin etatFenetre(id, texte) // ferme la fenetre function fermerFenetre(id) {

 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     if (i==0)
       fntrs_obj[i].opener=top;
     fntrs_obj[i].close();
     fntrs_ids[i]="";
     return true;
   }
 }
 return false;

} // fin fermerFenetre(id) // ouvre l"URL specifiee dans une fenetre function ouvrirFenetre(id, url, prop) {

 var fprp;
 if (!url) { url="about:blank"; }
 if (!prop) {
   fprp="toolbar=1,location=1,directories=1,menubar=1,scrollbars=1,resizable=1,status=1";
 } else {
   fprp=prop;
 }
 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     fntrs_obj[i]=window.open(url, id, fprp);
     if (window.focus) { fntrs_obj[i].focus(); }
     return true;
   }
 }
 fntrs_ids[fntrs_cpt]=id;
 fntrs_obj[fntrs_cpt]=window.open(url, id, fprp);
 if (window.focus) { fntrs_obj[fntrs_cpt].focus(); }
 fntrs_cpt=fntrs_cpt+1;
 return true;

} // fin ouvrirFenetre(id, url, prop) // ouvre l"URL specifiee en plein ecran function ouvrirPleinEcran(id, url) {

 var fprp="fullscreen=1,left=0,top=0,width="+(screen.width-6)+",height="+(screen.height-26);
 ouvrirFenetre(id, url, fprp);
 deplacerFenetreVers(id, 0, 0);
 return true;

} // fin ouvrirPleinEcran(id, url) // ouvre l"URL specifiee dans une fenetre de type popup function ouvrirPopup(id, url) {

 var fprp="left="+Math.floor((screen.width-250)/2)+",top="+Math.floor((screen.height-150)/2);
 fprp+=",width=250,height=150,status=0,directories=0,toolbar=0";
 fprp+=",location=0,menubar=0,scrollbars=0,resizable=0";
 ouvrirFenetre(id, url, fprp);
 return true;

} // fin ouvrirPopup(id, url) // redirige la fenetre vers l"URL specifiee function redirigerFenetre(id, url) {

 if (!url) { url="about:blank"; }
 for (var i=0; i<fntrs_cpt; i++) {
   if (fntrs_ids[i]==id) {
     if (window.location.replace) fntrs_obj[i].location.replace(url);
     else fntrs_obj[i].location.href=url;
     return true;
   }
 }
 return false;

} // fin redirigerFenetre(id, url)

   </SCRIPT>
 </HEAD>
 <BODY>

JsLib 1.3


Exemple - fenetres.js

   <NOSCRIPT>

Erreur : votre navigateur ne reconnait pas le Javascript ou est configuré pour ne pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la configuration dans les préférences/options de votre navigateur.


   </NOSCRIPT>
   <FORM ACTION="GET" NAME="f1">
   
     <P>Ouvrir une nouvelle fenêtre :
<INPUT TYPE="text" NAME="t1" VALUE="http://www.google.fr/" SIZE=50>
<INPUT TYPE="button" VALUE="Fenêtre (fen1)" onClick="ouvrirFenetre("fen1", this.form.t1.value)"> <INPUT TYPE="button" VALUE="Plein écran (ecr1)" onClick="ouvrirPleinEcran("ecr1", this.form.t1.value)"> <INPUT TYPE="button" VALUE="Popup (pop1)" onClick="ouvrirPopup("pop1", this.form.t1.value)"> <P>Créer une nouvelle page Web dans une nouvelle fenêtre :
<TEXTAREA NAME="t2" ROWS=5 COLS=50>

<HTML> <HEAD><TITLE>Test</TITLE></HEAD> <BODY>Page de test</BODY> </HTML></TEXTAREA>

       <INPUT TYPE="button" VALUE="Fenêtre (fen2)" onClick="ecrireFenetre("fen2", this.form.t2.value)">
       <INPUT TYPE="button" VALUE="Plein écran (ecr2)" onClick="ecrirePleinEcran("ecr2", this.form.t2.value)">
       <INPUT TYPE="button" VALUE="Popup (pop2)" onClick="ecrirePopup("pop2", this.form.t2.value)">
     <P>Fermer une fenêtre :
<INPUT TYPE="button" VALUE="Fermer cette fenêtre" onClick="fermerFenetre("self")"> <INPUT TYPE="button" VALUE="Fermer fen1" onClick="fermerFenetre("fen1")"> <P>Placer une fenêtre au premier plan ou à l"arrière-plan (fen 1) :
<INPUT TYPE="button" VALUE="Activer fen1" onClick="activerFenetre("fen1")"> <INPUT TYPE="button" VALUE="Désactiver fen1" onClick="desactiverFenetre("fen1")"> <P>Déplacer une fenêtre (fen 1) :
<P>Position absolue (coordonnées en pixels) :
X= <INPUT TYPE="text" NAME="t3" SIZE=5 VALUE="150"> Y= <INPUT TYPE="text" NAME="t4" SIZE=5 VALUE="150"> <INPUT TYPE="button" VALUE="Déplacer fen1" onClick="deplacerFenetreVers("fen1", parseInt(this.form.t3.value), parseInt(this.form.t4.value))">
       Position relative (incrément de 10 pixels) : 
          <INPUT TYPE="button" VALUE="Haut" onClick="deplacerFenetreDe("fen1", 0, -10)">
<INPUT TYPE="button" VALUE="Gauche" onClick="deplacerFenetreDe("fen1", -10, 0)"> <INPUT TYPE="button" VALUE="Bas" onClick="deplacerFenetreDe("fen1", 0, 10)"> <INPUT TYPE="button" VALUE="Droite" onClick="deplacerFenetreDe("fen1", 10, 0)">
     <P>Modifier la largeur et la hauteur d"une fenêtre (fen1) :
<P>Dimensions (en pixels) : 
Largeur = <INPUT TYPE="text" NAME="t5" SIZE=10 VALUE="400"> Hauteur = <INPUT TYPE="text" NAME="t6" SIZE=10 VALUE="300"> <INPUT TYPE="button" VALUE="Redimensionner fen1" onClick="dimensionsFenetre("fen1", parseInt(this.form.t5.value), parseInt(this.form.t6.value))"> <P>Modifier le contenu de la barre d"état d"une fenêtre (fen1) :
<INPUT TYPE="text" NAME="t7" VALUE="texte à placer dans la barre d"état" SIZE=50> <INPUT TYPE="button" VALUE="Mettre à jour fen1" onClick="etatFenetre("fen1", this.form.t7.value)"> <P>Rediriger une fenêtre vers une autre URL (fen1) :
<INPUT TYPE="text" NAME="t8" VALUE="http://www.yahoo.fr/" SIZE=50> <INPUT TYPE="button" VALUE="Rediriger fen1" onClick="redirigerFenetre("fen1", this.form.t8.value)"> </FORM> </BODY>

</HTML>



 </source>
   
  


Open a new window and load new page

   <source lang="html4strict">
  

<HTML> <HEAD> <SCRIPT language="JavaScript"> function new_win() {

 window.open("http://www.wbex.ru","mywin","width=400,height=300,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes");

} </SCRIPT> </HEAD> <BODY> <FORM name="myform"> <INPUT TYPE="button" value="Open New Window" onClick="new_win()"> </FORM> </BODY> </HTML>


 </source>
   
  


Open a new window with your own options

   <source lang="html4strict">
  

<html> <head> <title>Windows</title> </head> <body> <script type="text/javascript"> var optionString = prompt("Enter your option string"); optionString = optionString ? optionString : ""; document.writeln("Options are: " + optionString); window.open("http://wbex.ru","test",optionString); </script> </body> </html>


 </source>
   
  


Output tag name from window event to status bar

   <source lang="html4strict">
  

<html> <head> <title>A Simple Page</title> <script language="JavaScript"> function tagInfo() {

   var tag;
   tag = window.event.srcElement.tagName;
   window.status = tag;

} </script> </head> <body onMouseover="tagInfo()">

Heading One

<p>Some text

</body> </html>


 </source>
   
  


Set text for windows status bar

   <source lang="html4strict">
  

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function butCheckForm_onclick() {

  var myForm = document.form1;
  myForm.txtAge.blur();
  
  if (myForm.txtAge.value == "" || myForm.txtName.value == "")
  {
     document.write("missing value!");
     if (myForm.txtName.value == "")
     {
        myForm.txtName.focus();
     }
     else
     {
        myForm.txtAge.focus();
     }
  }
  else
  {
     document.write(myForm.txtName.value);
  }

} function txtAge_onblur() {

  var txtAge = document.form1.txtAge;
  if (isNaN(txtAge.value) == true)
  {
     alert("Age must be a number.");
     txtAge.focus();
     txtAge.select();
  }

} function txtName_onchange() {

  window.status = "Hi " + document.form1.txtName.value;
  document.write(document.form1.txtName.value);

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1> Please enter the following details:

  Name:<INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
  Age: <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()">
       <INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm onclick="butCheckForm_onclick()">

</FORM> </BODY> </HTML>


 </source>
   
  


X/Y Marks the Spot for a popup window (IE)

   <source lang="html4strict">
  

<html> <head> <title>X/Y Marks the Spot</title> <script type="text/javascript"> function mouseDown() {

 var locString = "X = " + window.event.screenX + " Y = " + window.event.screenY;
 document.write(locString);

} document.onmousedown=mouseDown; </script> </head> <body> </body> </html>


 </source>