JavaScript DHTML/Window Browser/Window Properties

Содержание

1 Access window properties
2 Change status bar with mouse click
3 Change window location
4 Displaying the Associative Properties Area of a Window Object
5 Modifies the properties and the contents of the browser"s windows
6 Open a new window and load new page
7 Open a new window with your own options
8 Output tag name from window event to status bar
9 Set text for windows status bar
10 X/Y Marks the Spot for a popup window (IE)

Access window properties

   
<html>
<head>
<script language="JavaScript">
<!--
function showResults(obj, name) {
  document.writeln("<table cellpadding=5 border=1><tr><td align=middle><b><font size=-1>" + name + "</font></b></td></tr>");
  for (i in obj) {
      document.writeln("<td><font size=-1>" + i + "</font></td>");
      document.writeln("</table><p>");
  }
}
showResults(document, "document");
showResults(window, "window");
//-->
</script>
</head>
</html>

Change status bar with mouse click

   
<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>

Change window location

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

Displaying the Associative Properties Area of a Window Object

   
<HTML>
<HEAD>
<TITLE>Window Object Properties Array</TITLE>
</HEAD>
<BODY>
<SCRIPT> 
for (var i in window) { 
  document.write ("Window property(" + i +  "): " + 
     window[i] + "<BR>"); 
} 
</SCRIPT>
</BODY>
</HTML>

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

   
<!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">
    <!-- fenetres.js -->
    <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>
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - fenetres.js</H2>
    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    <FORM ACTION="GET" NAME="f1">
    
      <P>Ouvrir une nouvelle fen&ecirc;tre :<BR>
        <INPUT TYPE="text" NAME="t1" VALUE="http://www.google.fr/" SIZE=50><BR>
        <INPUT TYPE="button" VALUE="Fen&ecirc;tre (fen1)" onClick="ouvrirFenetre("fen1", this.form.t1.value)">
        <INPUT TYPE="button" VALUE="Plein &eacute;cran (ecr1)" onClick="ouvrirPleinEcran("ecr1", this.form.t1.value)">
        <INPUT TYPE="button" VALUE="Popup (pop1)" onClick="ouvrirPopup("pop1", this.form.t1.value)">
      <P>Cr&eacute;er une nouvelle page Web dans une nouvelle fen&ecirc;tre :<BR>
        <TEXTAREA NAME="t2" ROWS=5 COLS=50>
&lt;HTML&gt;
&lt;HEAD&gt;&lt;TITLE&gt;Test&lt;/TITLE&gt;&lt;/HEAD&gt;
&lt;BODY&gt;Page de test&lt;/BODY&gt;
&lt;/HTML&gt;</TEXTAREA><BR>
        <INPUT TYPE="button" VALUE="Fen&ecirc;tre (fen2)" onClick="ecrireFenetre("fen2", this.form.t2.value)">
        <INPUT TYPE="button" VALUE="Plein &eacute;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&ecirc;tre :<BR>
        <INPUT TYPE="button" VALUE="Fermer cette fen&ecirc;tre" onClick="fermerFenetre("self")">
        <INPUT TYPE="button" VALUE="Fermer fen1" onClick="fermerFenetre("fen1")">
      <P>Placer une fen&ecirc;tre au premier plan ou &agrave; l"arri&egrave;re-plan (fen 1) :<BR>
        <INPUT TYPE="button" VALUE="Activer fen1" onClick="activerFenetre("fen1")">
        <INPUT TYPE="button" VALUE="D&eacute;sactiver fen1" onClick="desactiverFenetre("fen1")">
      <P>D&eacute;placer une fen&ecirc;tre (fen 1) :<BR>
        <P>Position absolue (coordonn&eacute;es en pixels) :<BR>
          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&eacute;placer fen1" onClick="deplacerFenetreVers("fen1", parseInt(this.form.t3.value), parseInt(this.form.t4.value))">
      <TABLE SUMMARY="" BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD>
        Position relative (incr&eacute;ment de 10 pixels) :&nbsp;
      </TD><TD ALIGN=CENTER>
        &nbsp;&nbsp;&nbsp;<INPUT TYPE="button" VALUE="Haut" onClick="deplacerFenetreDe("fen1", 0, -10)"><BR>
        <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)">
      </TD></TR></TABLE>
      <P>Modifier la largeur et la hauteur d"une fen&ecirc;tre (fen1) :<BR>
        <P>Dimensions (en pixels) :&nbsp;<BR>
        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"&eacute;tat d"une fen&ecirc;tre (fen1) :<BR>
        <INPUT TYPE="text" NAME="t7" VALUE="texte &agrave; placer dans la barre d"&eacute;tat" SIZE=50>
        <INPUT TYPE="button" VALUE="Mettre &agrave; jour fen1" onClick="etatFenetre("fen1", this.form.t7.value)">
      <P>Rediriger une fen&ecirc;tre vers une autre URL (fen1) :<BR>
        <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>

Open a new window and load new page

   
<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>

Open a new window with your own options

   
<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>

Output tag name from window event to status bar

   
<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()">
<h1>Heading One</h1>
<p>Some text</p>
</body>
</html>

Set text for windows status bar

   
<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>

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

   
<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>

JavaScript DHTML/Window Browser/Window Properties

Содержание

Access window properties

Change status bar with mouse click

Change window location

Displaying the Associative Properties Area of a Window Object

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

Open a new window and load new page

Open a new window with your own options

Output tag name from window event to status bar

Set text for windows status bar

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

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты