Window Object o ventana del navegador en JavaScript
En este artículo vas descubrir una lista de las funciones más interesantes que nos brinda el Window Object de JavaScript.
Se trata del objeto que permite controlar la ventana de navegación usando JavaScript.
El objeto Window contiene un montón de información y funciones relacionadas con la ventana de navegación del usuario.
Window console log
El objeto Window permite mostrar información en la consola del navegador de la siguiente forma:
window.console.log('hola');
Debido a que console log es un atributo global de la ventana también se puede utilizar de la siguiente forma:
console.log('hola');
Window Object Alert
El objeto Window tiene una función que permite mostrar una alerta en pantalla de forma intrusiva.
De la misma forma que el console log, esta función está disponible en toda la ventana. Por ese motivo, se puede utilizar de la siguiente forma:
alert('hola');
Window Object Prompt
El objeto Window tiene una función que permite interactuar con el usuario a través de ventanas adicionales con el objetivo principal de conseguir algún dato que pueda facilitar el usuario.
Por ejemplo, si quieres preguntar el nombre del usuario, puedes hacer lo siguiente:
const nombre = prompt('Escribe tu nombre');
console.log(`bienvenido ${nombre}`);
Window Object Confirm
El objeto Window tiene una función que permite al usuario confirmar una acción que vaya a realizar en la página.
Por ejemplo, para un botón de eliminar podemos agregarle un confirm y controlarlo de la siguiente forma:
if (confirm('Eliminar?')) {
console.log('Eliminado');
} else {
console.log('No hacer nada');
}
Altura y anchura del navegador con JavaScript
Del Window Object también podemos conseguir propiedades con cierta información del navegador para condicionar acciones.
Conseguir la altura y anchura del navegador puede ser una buena información para condicionar código según la ventana del usuario.
let altura, anchura;
altura = window.outerHeight;
anchura = window.outerWidth;
console.log(altura);
console.log(anchura);
Altura y anchura de la ventana con JavaScript
Con el objeto Window también tienes la posibilidad de conseguir la altura y anchura de la ventana sin la interfaz del navegador. Esto seguro que puede resultarte mucho más útil que lo anterior.
let altura, anchura;
altura = window.innerHeight;
anchura = window.innerWidth;
console.log(altura);
console.log(anchura);
Window Object Location
Con Window Location puedes conseguir información de la url, el archivo que se está ejecutando, la url, y muchas cosas más.
console.log(window.location);
Con Window Location Search puedes obtener los parámetros que hay en la url:
console.log(window.location.search);
Con Window Location puedes redireccionar al usuario de la siguiente forma:
window.location.href = 'http://www.jose-aguilar.com';
Window History
Puedes navegar por el historial de navegación del usuario de la siguiente forma:
window.history.go(-2);
El parámetro -2 indica la posición de la página web que vio anteriormente. En este caso, se volverá atrás a la penúltima página que visitó el usuario.
Window Object Navigator
Con Window Navigator puedes obtener información relacionado con el navegador web que utiliza el usuario.
console.log(window.navigator);
Conclusión
En el Window Object puedes encontrar muchísima información y funciones que te puede resultar muy útil para hacer más sencillo tu código.
Por ejemplo, para detectar el navegador o el alto y ancho de la ventana no vas a necesitar utilizar un plugin como en otras librerías o lenguajes de programación. Puedes aprovecharte del objeto Window para sacar toda esta información y mucho más.
Cual es la mejor forma de inhabilitar las flechas de navegación en los navegadores, por ejemplo, cuando se está desarrollando un formulario con varias páginas y se requiere que el usuario no haga uso de esas flechas, sino forzar a que utilice los botones de adelantar y atrasar (o página siguiente y página anterior) del formulario?
Hola,
Pues no tengo claro si es posible lo que comentas.
Quizá puedes pensarlo de otra forma y usar esté código en javascript:
window.history.forward();
Saludos