El objeto navigator es uno de los primeros objetos que incluyó el DOM y permite obtener información sobre el propio navegador. En Internet Explorer, el objeto navigator también se puede acceder a través del objeto clientInformation.

Aunque es uno de los objetos menos estandarizados, algunas de sus propiedades son comunes en casi todos los navegadores. A continuación se muestran algunas de esas propiedades:

Objetivo

Utilizar los objetos relacionados con el navegador en una aplicación jаvascript

Lecturas propuestas

Objetos del Navegador

Cuando se carga una página en un navegador se crean un número de objetos característicos del navegador según el contenido de la página.

La siguiente figura muestra la jerarquía de clases del Modelo de Objetos del Documento (Document Object Model).

El objeto window es el de más alto nivel, contiene las propiedades de la ventana y en el supuesto de trabajar con marcos (frames), se genera un objeto window para cada uno. El objeto document contiene todas las propiedades del documento actual, como son: su color de fondo, enlaces, imágenes, etc. Véase la figura.

El objeto navigator contiene las propiedades del navegador. El objeto location contiene las propiedades de la URL activa. El objeto history contiene las propiedades que representan a las URL que el usuario ha visitado anteriormente. Es como una caché. El objeto screen contiene información referente a la resolución de la pantalla que muestra la URL.

El Objeto window

Contine las propiedades básicas de la ventana y sus componentes. Algunas de los datos más elementales son:

defaultStatus contiene el mensaje que aparece en la barra de estado)
frames es una matriz que representa todos los frames de la ventana
length contiene el número de frames de la ventana
name contiene el nombre de la ventana
self hace referencia a la ventana activa

El siguiente ejemplo muestra cómo modificar el mensaje que aparece en la barra de estado del navegador.

<html>
<head><title> Ejemplo del Objeto window</title> </head>
<body>
<script language=jаvascript>

window.defaultStatus = "Hola ;-), este mensaje aparece en la barra de estado";

</script>
</body>
</html>

El objeto window también posee una serie de métodos que permiten ejecutar funciones específicas con las ventanas, como por ejemplo, crear ventanas y cuadros de diálogo. Tambiés es posible determinar el aspecto que tendrá la nueva ventana del navegador mediante los campos de datos que permiten configurar el menú, la barra de herramientas, la barra de estado, etc. El siguiente ejemplo muestra cómo abrir una nueva ventana desde la ventana actual.

<html>
<head>
<title>Ejemplo de creación de ventana</title>

<script language="jаvascript">

function AbrirVentana() {
  ventana=open("","nueva","toolbar=no,directories=no,menubar=no,width=180,height=180");
  ventana.document.write("<head><title>Nueva Ventana </title></head><body>");
  ventana.document.write("<font size=4 color=red>Nueva Ventana</font><br><br><br>");
  ventana.document.write("<form><input type='button' VALUE='Cerrar' onclick='self.close()'></form>");
}
</script>
</head>
<body>
  <form>
    <input type="button" value="Abrir una ventana" onclick="AbrirVentana();">
    <br>
  </form>
</body>
</html>

Ver Ejemplo.

El Objeto location

El objeto location contiene toda la información sobre la URL que se esta visualizando, así como todos los detalles de esa dirección (puerto, protocolo, etc.).

El Objeto screen

Permite obtener información sobre la resolución de la pantalla. En el siguiente ejemplo, se estable el color de fondo de la página de acuerdo a la resolución que soporte la pantalla del usuario.

<html>
<head><title> Ejemplo del Objeto screen</title> </head>
<body>
<script language=jаvascript>
switch (window.screen.colorDepth)
{
   case 1: case 4:
      document.bgColor = "white";
      break;
   case 8: case 15: case 16:
      document.bgColor = "blue";
      break;
   case 24: case 32:
      document.bgColor = "skyblue";
      break;
   default:
      document.bgColor = "white";
}
document.write("Su pantalla soporta color de " + window.screen.colorDepth +" bit");
</script>
</body>
</html>

Ver Ejemplo.

El Objeto document

El objeto document La página en sí, hace referencia a determinadas características de la página, como son su color de fondo (bgColor), el color de su enlaces, etc.

El código que se muestra a continuación carga una imagen dependiendo de la elección que haga el usuario.

<html>
<head><title> Ejemplo del Objeto document</title>
<!-- Se muestra un número diferente de imágenes dependiendo 
  -- del valor que introduzca el usuario 
  -- dato: src 
  -->
</head>
<body>

<img name=img1 src="" border=0 width=300 height=250>

<script language=jаvascript>
   var myImages = new Array("https://tutorialesenlinea.es/uploads/posts/2018-08/thumbs/1533769556_curso-de-bsico-de-js_tutoriales_en_linea.webp","https://tutorialesenlinea.es/uploads/posts/2018-08/thumbs/1533826520_estructuras-de-control-de-flujo-js_tutoriales_en_linea.webp","https://tutorialesenlinea.es/uploads/posts/2018-08/thumbs/1533820966_operadores_js_tutoriales_en_linea_.webp","https://tutorialesenlinea.es/uploads/posts/2018-08/thumbs/1533828061_funciones-js_tutoriales_en_linea.webp");
   var imgIndex = prompt("Enter a number from 0 to 3","");
   document.images["img1"].src = myImages[imgIndex];
</script>
</body>
</html>

Ver Ejemplo.

A continuación vemos un ejemplo que permite conectar código a los eventos de la página web. El primero de ellos simplemente muestra una ventana de alerta, mientras que el segundo va modificando de forma aleatoria la imagen que se carga.

<html>
<head><title> Ejemplo de Eventos</title>
</head>
<body>
<script language=jаvascript>
function linkSomePage_onclick() {
   alert('Este enlace no lleva a ninguna parte');
   return false;
}
</script>

<A HREF="somepage.htm" NAME="linkSomePage">
   Pincha Aquí 
</A>

<script language=jаvascript>
   window.document.links[0].onclick = linkSomePage_onclick;
</script>
</body>
</html>

Ver Ejemplo.

El Objeto history

El objeto history contiene información sobre los enlaces que el usuario ha visitado. Se utiliza principalmente para generar botones de avance y retroceso.

El Objeto navigator

El objeto navigator permite obtener información del navegador con el que se está visualizando el documento. El siguiente código jаvascript detecta el navegador que se está utilizando y abre la página específica del mismo.

<html>
<head><title> Ejemplo del Objeto navigator</title>
<!-- Se detecta el navegador con el que se ha abierto la página 
  -->
<script language=jаvascript>
<!--
function getBrowserName() {
   var lsBrowser = navigator.appName;
   if (lsBrowser.indexOf("Microsoft") >= 0) {
      lsBrowser = "MSIE";
   }
   else if (lsBrowser.indexOf("Netscape") >= 0) {
      lsBrowser = "NETSCAPE";
   }
   else {
      lsBrowser = "UNKNOWN";
   }
   return lsBrowser;
}

function getOS() {
   var userPlat = "unknown";
   var navInfo = navigator.userAgent;

   if ((navInfo.indexOf("windows NT") != -1)
       || (navInfo.indexOf("windows 95") != -1 )
       || (navInfo.indexOf("windows 98") != -1 )
       || (navInfo.indexOf("WinNT") != -1 )
       || (navInfo.indexOf("Win95") != -1 )
       || (navInfo.indexOf("Win98") != -1 )) {
      userPlat = "Win32";
   }
   else if(navInfo.indexOf("Win16") != -1) {
      userPlat = "Win16";
   }
   else if(navInfo.indexOf("Macintosh") != -1) {
      userPlat = "PPC";
   }
   else if(navInfo.indexOf("68K") != -1) {
      userPlat = "68K";
   }
   return userPlat;
}

function getBrowserVersion() {
   var findIndex;
   var browserVersion = 0;
   var browser = getBrowserName();

   if (browser == "MSIE") {
     browserVersion = navigator.userAgent;
     findIndex = browserVersion.indexOf(browser) + 5;
     browserVersion = parseInt(browserVersion.substring(findIndex,findIndex + 1));
   }
   else {
     browserVersion = parseInt(navigator.appVersion.substring(0,1));
   }
   return browserVersion;
}
-->
</script>
</head>
<body>
<script language=jаvascript>
<!--
var userOS = getOS();
var browserName = getBrowserName();
var browserVersion = getBrowserVersion();

if (browserVersion < 4 || browserName == "UNKNOWN" || userOS == "Win16") {
   document.write("<H2>Sorry this browser version is not supported</H2>")
}
else if (browserName == "NETSCAPE") {
   location.replace("/1930-curso-basico-de-jаvascript.html");
}
else {
   location.replace("/1930-curso-basico-de-jаvascript.html");
}
-->
</script>
<noscript>
   <H2>Esta página requiere un navegador que soporte jаvascript</H2>
</noscript>

<h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Web Editor - Tutoriales En Linea</h1>
<center><object type="text/html" data="https://tutorialesenlinea.es/ads/ads.html" frameborder="0" allowfullscreen width="100%" height="100%"></object></center>

</body>
</html>ç

Ver Ejemplo.