En los capítulos anteriores estuvimos viendo tanto eventos, como propiedades, como métodos del Browser Object Model, que se centran en las características y propiedades que como tal tiene el objeto window, que es el objeto global, es decir, el objeto de la ventana de nuestro navegador.
En este capítulo vamos a ver 3 objetos muy importantes, los cuales cuelgan directamente de window.
Objeto location
El objeto location o url es un objeto con varias propiedades y métodos. Veamos con un ejm los más importantes.
Ejm
console.log(location.origin); // Proporciona la ruta de origen console.log(location.protocol); // Proporciona el protocolo console.log(location.host); // Proporciona el host y el número de puerto console.log(location.hostname); // Proporciona el host console.log(location.port); // Proporciona el puerto console.log(location.href); // Imprime la URL completa y si hubiera parámetros // imprime tb el paso de los parámetros console.log(location.hash); // Detecta el valor de la URL que está después de un hash console.log(location.search); // Almacena los parámetros que se pasan console.log(location.pathname); // Detecta el archivo al que estamos consultando window.reload() // Recarga la página
Objeto history (historial)
El objeto history tiene una propiedad muy importante que es length (longitud). Para navegar entre páginas tenemos una serie de métodos, los cuales nos permiten ir hacia adelante o hacia atrás.
- history.back(3): vuelve tres páginas atrás del historial.
- history.forward(3): va 3 páginas hacia delante del historial.
- history.go(numero): va hacia adelante o hacia atrás, hacia delante son números positivos, hacia atrás son números negativos.
- history.go(-1): va una página atrás
- history.go(1): va una página adelante
Objeto navigator (navegador)
Este objeto es muy importante y complejo, dentro del cual disponemos de muchas propiedades y métodos. Veamos un ejm con las propiedades y objetos más importantes.
Ejm
console.log(navigator); console.log(navigator.connection); // Facilita el tipo de conexión console.log(navigator.geolocation); // Facilita la geolocalización console.log(navigator.mediaDevices); // Muestra los dispositivos como cámaras, micrófonos... console.log(navigator.mimeTypes); // Tipos de formatos que soportan los navegadores web (excel, word...) console.log(navigator.onLine); // El navegador tiene eventos para ver cuando el usuario pierde // la conexión o la vuelve a recuperar console.log(navigator.serviceWorker); // Es una API que nos ayuda a hacer Progressive Web Apps, es decir // a convertir un sitio web en una aplicación instalable console.log(navigator.storage); // El el API de almacenamiento, ya sea webStorage o localStorage console.log(navigator.usb); // La capacidad de detectar dispositivos USB cuando se conectan // o se desconectan console.log(navigator.userAgent); // Da mucha información sobre el navegador que se está conectando // a nuestra aplicación